element的unload上传多张图片，带参数请求一次接口/单个参数

第一种使用方式

上传一张图片，带参数，图片是已二进制的形式发送的

<template>
	<div>
		 <el-upload
		        class="avatar-uploader"
			         action="/MicroShopManageGoods/AddPicInfo" //请求接口 POST请求
			         :show-file-list="false"//显示上传列表
			         multiple //支持多选
			         :data="{ goodsID: goodsID }" //上传时附带的额外参数
			         :on-progress="progress"// 上传图片时的钩子
			         :on-success="onsuccess"//上传图片成功时
			         :on-error="onerror" //上传图片发生错误
			         list-type="picture-card" //显示省略图
		     	>
		   		<i class="el-icon-plus"></i> //图标
		  </el-upload>
		  <div class="loading" v-loading="loading"></div>//转圈效果
   </div>
 </template>
<script>
export default {
methods:{
 		progress() {
            this.loading = true;
            this.$message({
                message: '上传图片中',
            });
        },
        onsuccess() {
            this.loading = false;
            this.$message.success({
                message: '图片上传成功',
            });
            this.$emit('imgAddSuccess', this);
        },
        onerror() {
            this.loading = true;
            this.$message.error({
                message: '图片上传失败，请联系管理员',
            });
        },
        }
}
</script>

上传多张图片，带参数，请求一次接口

shopping-putaway-edit-module.vue

<!-- 图片 -->
    <div class="title">商品图片</div>
        <div class="title" style="border-bottom: none">
            <el-upload
                list-type="picture-card" //显示的方式
                class="upload-demo"
                ref="upload" //定义个ref，通过ref触发提交
                action="/MicroShopManageGoods/AddGoods" //这里已经无用，因为用了 `:http-request`
                //当在方法内触发this.$refs.upload.submit()时就会触发uploadFile方法
                :http-request="uploadFile"
                :on-preview="handlePictureCardPreview" //图片放大
                :auto-upload="false" //关闭自动提交
                :multiple="true" 	//支持多选
                :on-change="submit"	// 文件发生增加的时候触发
                :on-remove="handleRemove" //移除图片时触发的事件
            >
                <i slot="trigger" class="el-icon-plus"></i>// element图标
            </el-upload>
            //放大图片
            <el-dialog :visible.sync="dialogVisible"> 
                <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
    </div>
<script>
export default {

methods:{
	// 文件上传
        uploadFile(file) {
            this.fileData.append('file', file.file);
        },  // 文件删除
        handleRemove(file, fileList) {
            console.log(file, fileList);
            this.fileData = null;
            this.fileData = new FormData();
            fileList.forEach((element) => {
                this.fileData.append('file', element);
            });
	            //删除文件时，先清空之前有的数据，因为删除文件不会触发submit的事件，
	            //而再增加文件时会触发submit事件，所以如果不清空this.fileData，那删除文件根本没有用处，
	            /*这里的操作是：
					1.先清空this.fileData
					2.再new一个formData对象，
					3.获取到删除文件是的fileList文件数组，
					4.循环每一个fileList内的file文件出来，再append增加到fileData
					5.再执行一次提交，发送事件出去
				*/
	            this.submit();
        	},
	        // 把file文件已formdata的格式放进去，发送事件出去
	        async submit() {
	            this.fileData = new FormData();
	            this.$refs.upload.submit();
	            this.$emit('submit', this.fileData);
	        },
		}
	}
</script>

shopping-putaway.vue

<template>
   <shopping-putaway-edit-module @submit="submit" />
</template>
<script>
import shoppingPutawayEditModule from './shopping-putaway-edit-module';
export default {
    name: 'shopping-putaway',
    components: {
        shoppingPutawayEditModule,
    },
    data() {
        return {
            fileData: null,
        };
    },
    methods:{
	 // 确定上架 //发送请求
        async putawayShopping(val) {
        /* 这里的val 数据是这样：
			{
				goodsIntroduction: "这是新的商品"
				goodsName: "商品1"
				pickTime: "2020/11/6 14:24:54"
				price: 99
				__proto__: Object
			}
		*/
            if (this.fileData) {
            //如果子组件没有选择照片的话，这里的this.fileData会是null，则走else
            //不为null就把另一个组件的获取到的对象，key：value的形式放进去this.fileData
                for (let key in val) {
                    this.fileData.append(key, val[key]);
                }
                this.$message.warning({
                    message: '发布中,请稍等~',
                });
                const res = await this.$api.post_MicroShopManageGoods_AddGoods(
                    this.fileData,
                );
                if (res.error_code === 0) {
                    this.$message.success({
                        message: res.msg,
                    });
                } else {
                    this.$message.error({
                        message: res.msg,
                    });
                    return;
                }
            } else {
                this.$message.error({
                    message: '图片不能为空',
                });
                return;
            }
        },
        /*
	        这里是通过子组件传过来的方法，由于是子组件增/删图片会触发这个事件，
	        所以到这里的时候会复制给this.fileData
        */
        async submit(fileData) {
            this.fileData = fileData;
        },
	}
}
</script>