Vue—实现文件上传（多文件），图片上传

一、图片上传

//template
              <input
                type="file"
                accept="image/*"
                @change="changeImage()"
                ref="avatarInput"
                style="display:none"
              />
              <div class="pic_list">
                <div v-for="(src, index) in imgDatas" :key="index">
                  <!-- 利用element-ui的图片预览插件 -->
                  <el-image
                    style="margin-right: 10px;width: 100px; height: 100px"
                    :src="src"
                    :preview-src-list="imgDatas"
                  >
                  </el-image>
                </div>
                <!-- 替换自己的上传图标 -->
                <p class="upload_btn" @click="upLoad">＋</p>
              </div>
//script
data(){
	return {
      	formData: new FormData(),
		imgDatas:[]
	}
},
methods:{
	changeImage() {
      // 上传图片事件
      var files = this.$refs.avatarInput[0].files;
      var that = this;
      if (files.length === 0) {
        return;
      }
      function readAndPreview(file) {
        //Make sure `file.name` matches our extensions criteria
        if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
          var reader = new FileReader();
          reader.onload = function(e) {
            // 防止重复上传
            if (that.imgDatas.indexOf(e.target.result) === -1) {
              that.imgDatas.push(e.target.result);
              that.formData.append("imgFile", file);
              // console.log(that.formData.getAll("imgFile"));
            }
          };
          reader.readAsDataURL(file);
        }
      }
      if (files.length !== 0) {
        readAndPreview(files[0]);
      }
      // console.log(this.formData.getAll("imgFile"));
      // 文件上传服务器
      // this.setUploadFile()
    },
    setUploadFile() {
       // this.$http
       // .post("/api/dxbase/upload?resType=EVENT", this.formData)
       // .then(res => {
       //   console.log(res);
       // });
    },
    upLoad() {
      // 触发上传图片按钮
      this.$refs.avatarInput[0].dispatchEvent(new MouseEvent("click"));
    }
}
//style

.upload_btn {
  width: 100px;
  height: 100px;
  background: #fbfdff;
  border: 1px dashed #999;
  color: #666;
  box-sizing: border-box;
  font-size: 40px;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
}

.pic_list {
  display: flex;
  flex-wrap: wrap;
}

二、文件上传

              <el-button @click="choseFile" type="primary"
                >选择上传文件</el-button
              >
              <p>
                <span
                  v-for="(fileItem, fileIndex) in fileData"
                  :key="fileIndex"
                  style="font-size:12px;color: #666;padding-left: 10px;"
                  >{{ fileItem.name + "；" }}</span
                >
              </p>
              <input
                id="fileInput"
                style="display:none;"
                type="file"
                @change="addFile"
                ref="inputer"
              />
            </div>
//script
data(){
	return {
      	formData: new FormData(),
      	file: {},
      	fileData: [],			
	}
},methods:{
	choseFile() {
      // 选择文件
      let fileInput = document.getElementById("fileInput");
      fileInput.click();
    },
    addFile() {
      // 添加文件
      let inputDOM = this.$refs.inputer[0];
      if (inputDOM.files[0]) {
        this.file = inputDOM.files[0];
        // 防止重复上传
        //Make sure `file.name` matches our extensions criteria

        var reader = new FileReader();
        reader.onload = e => {
          // console.log(this.fileData);
          // console.log(
          //   this.fileData.some(v => {
          //     return v.result !== e.target.result;
          //   })
          // );
          if (this.fileData.length == 0) {
            this.fileData.push({
              name: this.file.name,
              result: e.target.result
            });
            this.formData.append("file", this.file);
            // console.log(this.formData.getAll("file"));
          } else {
            // 防止重复上传
            if (
              !this.fileData.some(v => {
                return v.result == e.target.result;
              })
            ) {
              this.fileData.push({
                name: this.file.name,
                result: e.target.result
              });
              this.formData.append("file", this.file);
              // console.log(this.formData.getAll("file"));
            }
          }
          //this.submitFile();
        };
        reader.readAsDataURL(this.file);
      }
      // console.log(this.formData.getAll("file"));
      // console.log(this.file)
    },
    submitFile() {
      //this.$http
      // .post("/api/dxbase/upload?resType=EVENT", this.formData)
       // .then(res => {
       //   console.log(res);
       // });
    }
}

本文地址：https://blog.csdn.net/ygkyufcl/article/details/107468858