最近遇到一个需求，就是图片的上传，效果图如下：
需要实现的功能有：
1. 多选上传图片
2. 预览已上传的图片
3. 删除图片
4. 图片回显

下面将通过两种方式来实现：

1.使用默认的action实现图片的上传

2.使用自定义的http-request实现图片的上传

下面分别介绍：

1.使用默认的action实现图片的上传

1.html部分代码

<el-upload action="/file/Upload?module=EQ" accept="image/jpeg,image/jpg,image/png" multiplelist-type="picture-card" :file-list="fileImgList" :on-preview="onPreview" :on-success="handleSuccess":on-remove="handleRemove"><i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="bigImgVisible"><img style="width:100%;" :src="dialogImageUrl" alt="">
</el-dialog>

2.js部分代码

一定要注意：upload上传组件中的图片集合，规定的数据格式是：[name:xxx,url:xxx]，一定要是一个数组，而且数组中的每一个对象都是有两个参数的，一个参数是name，一个参数是url。如果没有name参数的话，则可以通过随机生成或者其他的方式来获取一个值即可。

例如下方的处理方式，name可以通过url.length>6?url.substring(url.length-6):url,
因为url图片路径肯定是要有的，可以根据url的值是否大于6位，如果大于6位，则截取几位，否则直接使用url来展示。也可以通过String(new Date().getTime()).substr(8)这种方式来获取当前时间戳的8位数。也是可以的。

var vm = new Vue({el:'#xxx',data(){return{dialogImageUrl: null,//预览图片的地址bigImgVisible: false,//预览图片是否展示fileImgList: [],//上传的图片集合eqForm:{imageUrl:'',//图片路径的拼接，是使用.逗号拼接成的字符串}}},created(){//根据回显的图片路径通过,逗号拼接的图片路径字符串，来实现图片的回显，则可以将图片路径字符串转化为一个fileList格式的数组才可以。if (this.eqForm.imageUrl) {var arr = this.eqForm.imageUrl.split(',');arr && arr.forEach(a => {this.fileImgList.push({//由于图片name: a.length > 6 ? a.substring(a.length - 6) : a,url: a,})})console.log('初始list', this.fileImgList);}},methods:{//图片的预览方法：onPreview(){if (file.url) {this.dialogImageUrl = file.url;this.bigImgVisible = true;}},//图片的删除方法handleRemove(file, fileList) {//注意图片删除时，会改变图片的Url格式，但是不影响具体的使用。this.fileImgList = fileList;},//图片上传成功的回调handleSuccess(response, file, fileList) {this.fileImgList = fileList;},//执行提交图片拼接字段的方法submitImg(){//在执行此方法时，可以对图片的路径进行拼接，最终拿到想要的数据if (this.fileImgList && this.fileImgList.length) {this.eqForm.imageUrl = '';this.fileImgList.forEach((file, fIndex) => {if (fIndex != this.fileImgList.length - 1) {this.eqForm.imageUrl += file.url + ',';} else {this.eqForm.imageUrl += file.url;}})}}}
})

上面的功能已经实现了！！！

2.使用自定义的http-request实现图片的上传

此时就不需要on-success监听图片上传成功时的回调方法了，直接通过http-request自定义上传方法来实现图片的上传

1.html部分代码

<el-upload action="/file/Upload?module=EQ" accept="image/jpeg,image/jpg,image/png" multiplelist-type="picture-card" :file-list="fileImgList" :on-preview="onPreview" :http-request="httpRequest":on-remove="handleRemove"><i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="bigImgVisible"><img style="width:100%;" :src="dialogImageUrl" alt="">
</el-dialog>

2.js部分代码

由于我这边是通过自定义的上传，如果我上传成功后，将接口返回的线上图片链接赋值到fileList中，则会出现图片上传有个跳动的效果，这种效果是不好的，因此我这边就不通过上传和删除图片触发fileList图片集合的方式了，而是直接拼接我想要的数据。所以每次接口上传上传成功后，我都进行了图片路径的拼接。

//自定义上传图片的方法httpRequest(params) {var file = params.file;var formData = new FormData();formData.append('file', file);$.ajax({url: "/file/Upload?module=PackagePic",type: "post",data: formData,processData: false,contentType: false,cache: false,success: (data) => {if (typeof data == 'object') {var res = data;console.log('111', this.eqForm.imageUrl);if (this.eqForm.imageUrl) {if (res.filepath) {this.eqForm.imageUrl += ',' + res.filepath;}} else {if (res.filepath) {this.eqForm.imageUrl = res.filepath;}}console.log('图片', this.eqForm);}},error: (data) => {}})
},
//删除图片的方法，同样进行图片路径的拼接
handleRemove(file, fileList) {this.fileImgList = fileList;if (this.fileImgList && this.fileImgList.length) {this.eqForm.imageUrl = '';this.fileImgList.forEach((file, fIndex) => {if (fIndex != this.fileImgList.length - 1) {this.eqForm.imageUrl += file.url + ',';} else {this.eqForm.imageUrl += file.url;}})}this.$forceUpdate();
},
//执行提交图片拼接字段的方法
submitImg(){//此时this.eqForm.imageUrl就是我想要的数据了，直接传递给后端接口即可
}

完成！！！