1. 程式人生 > 實用技巧 >Vue Element-ui el-upload

Vue Element-ui el-upload

<el-form-item prop="" label="幻燈圖">
          <el-upload
            :name="'attachment'"
            :action="uploaderRequestUrl"
            list-type="picture-card"
            :on-preview="handlePreview"
            :before-remove="beforeHandleRemove"
            :on-remove="handleRemove"
            :headers
="uploadHeader" :on-success="handleSuccess" :on-error="handleError" :auto-upload="true" :before-upload="beforeUpload" :limit="slideLimit" :file-list="slideFileList" :on-exceed="handleExceed" > <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt="" /> </el-dialog> </el-form-item>
handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

beforeHandleRemove(file, fileList) {
      return true;
    },
    handleRemove(file, fileList) {
      if (file && file.status === "success") {
        this.slideFileList = fileList;
        
this.form.cover.slide = []; if (this.slideFileList.length > 0) { for (let i = 0; i < this.slideFileList.length; i++) { this.form.cover.slide[i] = this.slideFileList[i].url; } } } }, beforeUpload(file) { let limit = 5; const isLtxM = file.size / 1024 / 1024 < limit; if (!isLtxM) { this.$message.error("上傳檔案大小不能超過" + limit + "MB!"); return false; } return true; }, handleSuccess(res) { if (res.error !== 0) { console.log("err"); this.uploadErrorTip(res.message); } else { console.log("succ"); this.uploadSuccessTip(); // console.log(res); let filePath = res.data.file_path; this.form.cover.slide.push(filePath); // console.log(this.form.cover.slide); this.slideFileList = this.form.cover.slide.map(item => { return { name: item, url: item }; }); // console.log(this.slideFileList); } this.listLoading = false; this.isUploading = false; }, handleError(res) { this.uploadErrorTip("上傳失敗"); this.listLoading = false; this.isUploading = false; }, uploadErrorTip(msg) { this.$message.error(msg); }, uploadSuccessTip() { this.$message({ message: "上傳成功", type: "success" }); }, handleExceed(files, fileList) { this.$message.warning(`最多可以 ${this.slideLimit} 個檔案`); }
computed: {
    uploaderRequestUrl() {
      return `${process.env.VUE_APP_BASE_API}remote-upload`;
    }
  },

阿斯達按時打算打算打算大所多按時