最近遇到一个需求，就是图片的上传，效果图如下：
需要实现的功能有：
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" multiple
           list-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" multiple
           list-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就是我想要的数据了，直接传递给后端接口即可
}

完成！！！