el-upload上传组件的封装

效果图如下：

照片墙的相关属性：
----- action：图片上传地址:devapi/admin/product/fileUpload
----- list-type：文件列表类型，当前是照片墙
----- :on-preview 图片预览触发
----- :on-remove 删除图片触发
----- :file-list 上传的文件列表，格式：[{name: 'food.jpg', url: 'xxx.jpg'}]
----- :on-success 图片上传成功时的钩子
----- :limit 限制上传数量

// 模版中的代码
<el-form-item label="SPU图片">
    <el-upload
      action="/dev-api/admin/product/fileUpload"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handlerSuccess"
      :file-list="spuImageList"
      >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
</el-form-item>

// <script></script>中的代码
<script>
export default{
    data(){
        return{
            spuform:{
                spuImageList:[]
            }
            spuImageList:[]  //存储图片数据
            dialogImageUrl: "",
            dialogVisible: false,
        }
    },
    methods:{
         async initSpuData(spu) {
             let spuImageResult = await this.$API.spu.reqSpuImageList(spu.id);
             if (spuImageResult.code == 200) {
                let listArr = spuImageResult.data; //获取图片数组
                //由于照片墙显示图片的数据需要数组，数组里面的元素需要有name与url字段
                //需要把服务器返回的数据进行修改
                listArr.forEach((item) => {
                  item.name = item.imgName;
                  item.url = item.imgUrl;
                });
                //把整理好的数据赋值给spuImageList
                this.spuImageList = listArr;
             }
         }
        //照片墙删除某一个图片的时候会触发
        handleRemove(file, fileList) {
          //file参数:代表的是删除的那张图片
          //fileList:照片墙删除某一张图片以后，剩余的其他的图片
          //收集照片墙图片的数据
          //对于已有的图片【照片墙中显示的图片：有name、url字段的】，因为照片墙显示数据务必要有这两个属性
          //对于服务器而言，不需要name、url字段，但将来对于有图片的数据在提交给服务器的时候，需要处理
          this.spuImageList = fileList;
        },
        //照片墙图片预览的回调
        handlePictureCardPreview(file) {
          //将图片地址赋值给这个属性
          this.dialogImageUrl = file.url;
          //对话框显示
          this.dialogVisible = true;
        },
        //照片墙图片上传成功的回调
        handlerSuccess(response, file, fileList) {
          //收集图片的信息
          this.spuImageList = fileList;
        },
      //保存要修改的信息
     async addOrUpdateSpu() {
          //整理参数：需要整理照片墙的数据
          //携带参数：对于图片，需要携带imageName与imageUrl字段
          this.spu.spuImageList = this.spuImageList.map((item) => {
            return {
              imageName: item.name,
              imageUrl: (item.response && item.response.data) || item.url,
            };
          });
          //发请求
          let result = await this.$API.spu.reqAddOrUpdateSpu(this.spu);
          if (result.code == 200) {
            //提示
            this.$message({ 
                    type: "success", 
                    message: "保存成功" 
            });
          }
          //清除数据？这里不太懂
          Object.assign(this._data, this.$options.data());
        },
    }
}   
</script>

附加知识点：

1、添加请求头

在vue项目中我们发送ajax请求一般都会使用axios，并在axios中设置axios.defaults.baseURL----请求的基本地址，并在请求拦截器中设置headers。

使用el-upload上传组件时，action 为必选参数(上传地址)。但此时我们为action填写地址不能不写基本地址而仅写upload，要写完整的地址。这是因为el-upload上传组件在上传发送请求时，不会去使用我们设置的axios，而是在组件内部自己封装了自己的请求方法。所以我们必须把地址写完整。那有时在上传时会报出错误，例如无效token or 401，这是因为我们没有为此上传请求设置请求头部。el-upload组件有一个属性headers,设置上传的请求头部。

<el-upload 
    action="yourUploadUrl" 
    :headers="{'Authorization': 'Bearer ' + yourToken}"
> 
    ... 
</el-upload>

Authorization: 请求头的名字(不固定)。
'Bearer ' ,如果token中有就不用拼接了（视情况而定）。

在ElementUI的上传组件el-upload中设置header

如何在el-upload中添加token

2、上传时附带参数

:data="{ 'shopId': '367', 'name': 'zhangsan' }"

367 与 zhangsan 可以用data中的数据

3、 传递参数（区分是哪个组件上传的图片）

// 其他属性中也可以传值
:on-remove="(file, fileList) => {return handleRemove(file, fileList, 'FRIDZ')}"


handleRemove(file, fileList, type){
    console.log(type) // FRIDZ
}