VUE 上传文件Elment ui ＜el-upload＞的使用

自动上传

<el-upload
                class="upload-demo"
                ref="upload"
                :multiple="true"
                :action="uploadFileUrl"
                :limit="1"
                :on-change="handlePreview"
                :on-remove="handleRemove"
                :on-exceed="handleExceed"
                :file-list="fileList"
                :show-file-list="true"
                :headers="headers"
                accept=".rar,.zip,.doc,.docx,.pdf"
              >
                <el-button slot="trigger" size="small" type="primary"
                  >上传文件</el-button
                >
                <div slot="tip" class="el-upload__tip">
                  支持格式：.rar .zip .doc .docx .pdf ，单个文件不能超过200MB
                </div>
              </el-upload>

data:部分

  data() {
    return {
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
      headers: {
        Authorization: getToken(),
      },
      fileList: [],
    };
  },

method:

/**
     * 删除文件
     */
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    /**
     * 文件change
     */
    handlePreview(file) {
      this.fileList.push(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择1个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },

手动上传

 

<el-upload
                class="upload-demo"
                ref="upload"
                :multiple="true"
                action="https://jsonplaceholder.typicode.com/posts/"
                :limit="1"
                :on-change="handlePreview"
                :on-remove="handleRemove"
                :on-exceed="handleExceed"
                :file-list="fileList"
                :show-file-list="true"
                accept=".rar,.zip,.doc,.docx,.pdf"
                :auto-upload="false"
              >
                <el-button slot="trigger" size="small" type="primary"
                  >上传文件</el-button
                >
                <div slot="tip" class="el-upload__tip">
                  支持格式：.rar .zip .doc .docx .pdf ，单个文件不能超过200MB
                </div>
              </el-upload>

希望读到这篇文章会对你有帮助~，有帮助请留下一个赞(*╹▽╹*)

                                                                ——————来自李易峰的小粉丝，凡凡同学