vue中实现图片和文件上传的示例代码

html页面

<input type="file" value="" id="file" @change='onUpload'>//注意不能带括号

js代码

methods: {
//上传图片
onUpload(e){
      var formData = new FormData();
    f ormData.append('file', e.target.files[0]);
    formData.append('type', 'test');
      $.ajax({
        url: '/ShopApi/util/upload.weixun'，//这里是后台接口需要换掉
        type: 'POST',
        dataType: 'json',
        cache: false,
        data: formData,
        processData: false,
        contentType: false,
        success: (res) => {
          if (res.code === 200) {
            var img_tpl ='<div class="picture" style="width:108px;float:left;"><img id="preview" src="'+后台返回的tu'pian路径+'" style="width:48px;height:48px;float:left;background-size:cover;"/><span class="r-span"
 onclick = "onDeletePicture()" style="color:#49BDCC;display:block;float:left;margin-left:10px;line-height:48px;">删除</span></div>';
            $("#refund_img").after(img_tpl);
          }
        },
        error: function(err) {
        alert("网络错误");
        }
      });
}
}

图片效果图

以上这篇vue中实现图片和文件上传的示例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于vue+ bootstrap实现图片上传图片展示功能

    基于vue+ bootstrap实现图片上传图片展示功能

    效果图如下所示: html ..... ....... <-- key=idPicUrl --> <div class="col-sm-7" > <img :src="queryFirmInfo[key]" alt="" style="max-height:200px;max-width:250px" class="myimage" :name="key"

  • 使用vue构建一个上传图片表单

    这篇博客也不知道起个什么名字比较好,毕竟刚开始学习vue,很多还不是很熟悉,一直在慢慢摸索中:之前也习惯了用jQuery写js代码,思维逻辑也要有个转换的过程. 1. 转变思维 使用vue编写代码,首先要做的就是转换思维,vue是一个数据驱动的框架,我们只需要操作数据,数据变化后,vue会自动改变DOM结构,而jQuery是直接操作DOM的.比如刚开始写的代码中犯的错误,有一个页面中的input标签是并列多个的,而且name属性的值是自增的,那么我就用v-for循环下,把index填充进去就行了

  • vuejs使用FormData实现ajax上传图片文件

    vuejs使用FormData实现ajax上传图片文件

    我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. 其实已经有朋友封装了相关的npm包,但是我想说用原生的js api来实现,也用不了多少代码,而且更灵活,能使用原生就尽量用原生.接下来就以一个简单的头像上传来说明如何使用. 效果图 前端实现 <template> <div class="admin"> <d

  • vue中用H5实现文件上传的方法实例代码

    整理文档,搜刮出一个vue中用H5实现文件上传的方法实例代码,稍微整理精简一下做下分享. 1.图片上传 <img v-if="personInfo.photoUrl" :src="headPreFix + personInfo.photoUrl" style="height:126px;max-width:133px;margin: 25px 0;"> <img v-else src="../../assets/def

  • vue+vux实现移动端文件上传样式

    vue+vux实现移动端文件上传样式

    样式使用的是vux的cell组件 如下图的官方demo样子 上图的样式需要修改一下,把 保护中 修改成一个图片 并且内嵌一个input type='file'  就可以拥有好看的样式的文件上传了 <!--引入组件--> import { Cell } from 'vux' <!--官网的组件是这么写的--> <group> <cell title="title" value="value"></cell>

  • vue.js 上传图片实例代码

    最近爱上了用vue.js做前端,昨天用vue上传图片时遇到了问题,最后半天时间终于摸索出来,我将相关部分的代码贴出来. 前端部分 <div class="form-group"> <label>背景图</label> <input type="file" class="form-control" @change="onFileChange"> </div> <d

  • vue项目中使用axios上传图片等文件操作

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 首先安装axios: 1.利用npm安装npm install axios –save 2.利用bower安装bower install axios

  • vue中实现图片和文件上传的示例代码

    html页面 <input type="file" value="" id="file" @change='onUpload'>//注意不能带括号 js代码 methods: { //上传图片 onUpload(e){ var formData = new FormData(); f ormData.append('file', e.target.files[0]); formData.append('type', 'test');

  • Vue+NodeJS实现大文件上传的示例代码

    Vue+NodeJS实现大文件上传的示例代码

    目录 整体思路 项目演示 前端界面 文件切片 hash计算 查询切片状态 切片上传(断点续传) 文件总体上传进度 合并文件 优化 请求并发数控制 hash值计算优化 常见的文件上传方式可能就是new一个FormData,把文件append进去以后post给后端就可以了.但如果采用这种方式来上传大文件就很容易产生上传超时的问题,而且一旦失败还得从新开始,在漫长的等待过程中用户还不能刷新浏览器,不然前功尽弃.因此这类问题一般都是通过切片上传. 整体思路 将文件切成多个小文件 hash计算,需要计算一

  • SpringBoot整合腾讯云COS对象存储实现文件上传的示例代码

    SpringBoot整合腾讯云COS对象存储实现文件上传的示例代码

    目录 1.开通腾讯云对象存储服务 2.创建存储桶 3.密钥管理,新建密钥 4.yml配置密钥.COS信息 5.COSConfig配置类 6.COS文件上传工具类 7.Controller测试上传接口: 8.PostMan接口调用 9.浏览器预览效果 企业级项目开发中都会有文件.图片.视频等文件上传并能够访问的场景,对于初学者Demo可能会直接存储在应用服务器上:对于传统项目可能会单独搭建FastDFS.MinIO等文件服务来实现存储,这种方案可能对于企业成本较小,但缺点也是很多,例如:1.增加技

  • Java实现一个简单的文件上传案例示例代码

    Java实现一个简单的文件上传案例 实现流程: 1.客户端从硬盘读取文件数据到程序中 2.客户端输出流,写出文件到服务端 3.服务端输出流,读取文件数据到服务端中 4.输出流,写出文件数据到服务器硬盘中 下面上代码 上传单个文件 服务器端 package FileUpload; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.net.Serve

  • GO语言实现文件上传的示例代码

    GO语言实现文件上传的示例代码

    目录 前言 文件上传 表单操作 服务端操作 流程实现 小结 前言 最近在写一个文件上传的功能,现在来进行整理总结一下go语言如何上传文件的,本文主要分享一下golang实现文件上传的流程和具体代码,供大家参考,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助. 文件上传 表单操作 要使表单能够上传文件,需要添加form的enctype属性enctype="multipart/form-data",upload.html代码如下: <html> <head> &

  • java接收ios文件上传的示例代码

    本文实例为大家分享了java如何接收ios文件上传的具体代码,供大家参考,具体内容如下 ios Multipart/form-data POST请求java后台spring接口一直出错,搞了两天,终于解决了,积累下来 package com.xx.controller; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.util.Iterator

  • VUE+element-ui文件上传的示例代码

    VUE+element-ui文件上传的示例代码

    目录 图片上传(ImageCropper) 文件上传(el-upload) 注意 图片上传(ImageCropper) 此前端代码自己封装了文件上传,只需要配置后端接口需求URL以及对应的图片上传成功后的处理函数,后端返回OSS生成的图片访问地址,然后cropsuccess函数将上传成功的图像进行显示. <template> <div class="app-container"> <!-- 讲师头像 --> <el-form-item labe

  • JAVA中使用FTPClient实现文件上传下载实例代码

    在java程序开发中,ftp用的比较多,经常打交道,比如说向FTP服务器上传文件.下载文件,本文给大家介绍如何利用jakarta commons中的FTPClient(在commons-net包中)实现上传下载文件. 一.上传文件 原理就不介绍了,大家直接看代码吧 /** * Description: 向FTP服务器上传文件 * @Version1.0 Jul 27, 2008 4:31:09 PM by 崔红保(cuihongbao@d-heaven.com)创建 * @param url F

  • Spring MVC 文件上传的示例代码

    Spring MVC 文件上传的示例代码

    一如既往记录下常用而又容易忘记的东西,本篇博文主要针对Spring MVC是如何上传文件的.以下记录两种上传方法并针对案例进行记录.(有关spring mvc其他配置省略) 1.使用Spring MVC 上传文件必须配置文件解析器,如下: <!-- 上传文件拦截,设置最大上传文件大小 10M=10*1024*1024(B)=10485760 bytes --> <bean id="multipartResolver" class="org.springfra

  • iOS利用AFNetworking实现文件上传的示例代码

    0.导入框架准备工作 1. 将框架程序拖拽进项目 2.  添加iOS框架引用 –SystemConfiguration.framework –MobileCoreServices.framework 3.  引入 #import "AFNetworking.h" 4. 修改xxx-Prefix.pch文件 #import <MobileCoreServices/MobileCoreServices.h> #import <SystemConfiguration/Sys

随机推荐