基于el-table的上传图片功能_vue el-table 加上传缩略图的功能

 <el-table-column label="图片" align="left" prop="picUrls" min-width="100">

          <template #default="scope">

            <el-upload

            disabled

            :action="enclosureUrl"

            class="picture-limit"

            :before-upload="handleBeforeUpload"

            accept="image/*"

            :on-success="(response, file, fileList)=>{handleFileSuccess(scope.row,response, file, fileList)}"

            :headers="enclosureHeaders"

            :limit="3"

            :on-preview="handlePictureCardPreview"

            :on-remove="(file, fileList)=>{handleRemove(scope.row,file, fileList)}"

            :file-list="scope.row.picUrls"

            list-type="picture-card"

            >

            <el-icon><Plus /></el-icon>

            </el-upload>

          </template>

        </el-table-column>

js部分：

//限制上传图片大小

function handleBeforeUpload(file){

  let imgSize = Number(file.size / 1024 / 1024);

  if(imgSize > 10){

    proxy.$modal.msgError('上传文件大小不能超过10MB')

    return false

  }

}

//图片上传成功

function handleFileSuccess(row,response, file, fileList){

  let obj = {

    name:response.data.sourceFileName,

    url:response.data.fileUrl

  }

  row.picUrls.push(obj)

}

//移除图片

function handleRemove(row, file, fileList){

  const index = row.picUrls.findIndex((item) => item.url == file.url);

  (row.picUrls).splice(index,1);

}