<el-row v-for="(v,i) in RecordOperation.imgList" :key="i">
                <el-col :span='11'>
                    <el-form-item label="圖片">
                        <el-upload
                                accept="image/jpeg,image/png"
                                class="avatar-uploader"
                                :action="uploadUrl()"
                                :show-file-list="false"
                                :on-success="dynamicPicSuccess.bind(null, {'index':i,'data':v})"
                                :before-upload="beforeUploadImageDynamicPic">
                            <img v-if="v.picUrl" :src="v.picUrl" class="avatar dynamic">
                            <i v-else class="el-icon-plus avatar-uploader-icon dynamic"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="圖片介紹">
                        <el-input minlength="4" maxlength="20" v-model.trim="v.content"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="2" align="right" v-show="RecordOperation.imgList.length<=2?false:true">
                    <el-button type="text" style="color:red;line-height:32px;" @click="delDynamicPic(i,RecordOperation.imgList)">刪除</el-button>
                </el-col>
            </el-row>

// 動態(tài)圖片驗證
            beforeUploadImageDynamicPic(file){
                var _this = this;
                var isLt10M = file.size / 1024 / 1024  < 10;
                if (['image/jpeg', 'image/png'].indexOf(file.type) == -1) {
                    _this.$message.error('請上傳正確的圖片格式');
                    return false;
                }
                if (!isLt10M) {
                    _this.$message.error('上傳圖片大小不能超過10MB哦!');
                    return false;
                }
            },

            //動態(tài)圖上傳成功
            dynamicPicSuccess(obj,res,file) {
                var imgList = this.RecordOperation.imgList
                var index = obj.index;
                imgList[index].picUrl = res.data.filePath;
                // 少于5張圖時，自動添加一行
                if(imgList.length<5)
                imgList.push({content: '', picUrl: ""});
            },

            // 移除動態(tài)建設(shè)圖片
            delDynamicPic(i,list) {
                this.$confirm('確認(rèn)刪除該條記錄？', '提示', {
                    confirmButtonText: '確定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    list.splice(i, 1);
                });
            },

<el-upload
	:data={pid:this.pid}
	>
</el-upload>

<el-upload
          :headers="upload.headers"
          :action="upload.url"
          :on-success="handleFileSuccess"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :file-list="completionPhotoList"
          :on-change="changeFile"
        >
        <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible" :modal="false">
   <img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>

<script>
export default {
  data() {
    return {
      // 用戶導(dǎo)入?yún)?shù)
      upload: {
        // 是否顯示彈出層（用戶導(dǎo)入）
        open: false,
        // 彈出層標(biāo)題（用戶導(dǎo)入）
        title: "",
        // 是否更新已經(jīng)存在的用戶數(shù)據(jù)
        updateSupport: 0,
        // 設(shè)置上傳的請求頭部
        headers: { Authorization: "Bearer " + getToken() },
        // 上傳的地址
        url: process.env.VUE_APP_BASE_API + "/api/common/upload",
      },
 } 
}

<el-upload
  :before-remove="beforeRemove"
  >
</el-upload>
<script>
  export default {
    data() {
      return {
        
      };
    },
    methods: {
      beforeRemove(file, fileList) {
        return this.$confirm(`確定移除 ${ file.name }？`);
      },
    }
  }
</script>

<el-upload
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  >
</el-upload>
<script>
  export default {
    data() {
      return {
        
      };
    },
    methods: {
      handleExceed(files, fileList) {
        this.$message.warning(`當(dāng)前限制選擇 3 個文件，本次選擇了 ${files.length} 個文件，共選擇了 ${files.length + fileList.length} 個文件`);
      },
    }
  }
</script>

<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

<script>
  export default {
    data() {
      return {
        imageUrl: ''
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
 
        if (!isJPG) {
          this.$message.error('上傳頭像圖片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上傳頭像圖片大小不能超過 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>