vue + elementui upload上传图片到服务器以及

前言：
关于vue和elementui安装导入使用不做介绍

1.template中首先展示upload多张图片上传

      <el-form-item label="产品图片" prop="productImg">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :auto-upload="false"
            :on-change="addFile"
            :file-list="showFiles" //编辑时显示图片的精髓
            ref="upload"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" size="tiny">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </el-form-item>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm('subjectForm')">确 定</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>

2.当upload组件发生改变时处罚addFile

//upload 改变时  触发的函数   主要目的为保存 filelist 和 大小限制
    addFile(file, fileList) {
      this.files = fileList;//主要用于接收存放所有的图片信息
      //限制上传文件为2M
      var sizeIsSatisfy = file.size < 2 * 1024 * 1024 ? true : false;
      if (sizeIsSatisfy) {
        return true;
      } else {
        this.fileSizeIsSatisfy = true;
        return false;
      }
    },

3.图片提交到服务器，拿到服务器的数据地址

submitForm(formName) {//提交form表单
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.files.length <= 0) {
            this.$message.error("请至少上传一个文件！");
            return;
          }
          if (this.fileSizeIsSatisfy) {
            this.$message.error("上传失败！存在文件大小超过2M！");
            return;
          }
          this.processFile();//处理files的数据变成键值对的形式   返回newFiles这个数组
          var param = new FormData(); // FormData 对象
          newFiles.forEach(fileItem => {
            var list = fileItem;
            var file = list.imgFile;
            param.append("files", file); // 文件对象
          });
          getImgUrl(param).then(
            msg => {
              console.log(msg);//拿到想要的图片地址
            },
            error => {
              console.log(error);
            }
          );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
//全部的图片添加到 newFiles中
    processFile() {
      this.files.forEach(item => {
        let objFile = {};
        objFile.title = "files";
        objFile.imgFile = item.raw;
        this.newFiles.push(objFile);
      });
    },

3.显示图片 将拿到的数据放进一个数组中显示到file-list中去就好了

openModal(val, data) {
        let fileArr = [];
        let fileObj = {};
        fileObj.name="file";
        fileObj.url = data.file;
        fileArr.push(fileObj);
        this.showFiles  = fileArr,
  },

至此，完结。
有不对的地方欢迎指导哦。