vue 中使用 Element 上传文件组件并自定义上传方法。

前言：最近在接触vue项目，正在使用 element plus，哎一言难尽，感觉 这个组件库不太适合我。本章简单的走一遍使用 element 中的 上传文件组件。

一、完整代码，代码有很多注释。

引入示例：

 引入之后的完整代码：

<!--html 代码-->
<el-upload   
      ref="upload" 
<!-- 必填 注释需要删除-->
     action="#"  
     list-type="picture-card"
<!--文件个数限制  注释需要删除-->
     :limit="1"  
<!--自定义上传方法  注释需要删除-->
     :http-request="httpRequest" 
<!--超出上传个数之后的方法  注释需要删除-->
     :on-exceed="handleExceed" > 
              <el-icon>
                <Plus />
              </el-icon>
              <template #file="{ file }">
                <div>
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                      <el-icon><zoom-in /></el-icon>
                    </span>
                    <span  class="el-upload-list__item-delete" @click="handleDownload(file)">
                      <el-icon>
                        <Download />
                      </el-icon>
                    </span>
                    <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                      <el-icon>
                        <Delete />
                      </el-icon>
                    </span>
                  </span>
                </div>
              </template>
            </el-upload>
 <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>


// js 代码 这里的引入可能不全，大家用的时候自己再引入就是
import { genFileId, UploadInstance,   UploadProps, UploadRawFile } from 'element-plus'

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
let imageUrl:any=''

//自定义上传
function httpRequest(file:any) {
      // 创建 FormData 对象
      const formData :any= new FormData();
      // 将文件添加到 FormData 中
       formData.append('file', file?.file);
      //接口方法，请替换成实际的方法和返回的值 
      uploadPicture(formData).then((res)=>{
        imageUrl=res?.p2pdata
        console.log('uploadPicture1',res?.p2pdata)
      })
      // 返回的文件也可以加在请求方法之后
      return file
    };
//删除已上传的文件，内容自填
const handleRemove = (file:any) => {
  console.log(file)
}
//预览放大 可以不动
const handlePictureCardPreview = (file:any) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}
//下载  内容自填
const handleDownload = (file:any) => {
 console.log(file)
}

const upload = ref<UploadInstance>()
//超出限制长度时触发替换方法  可不动
const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}

实现效果

二、异常情况记录。

① auto-upload 导致自定义上传无效，接口根本没有触发。

请将 auto-upload的值设置为真，自动上传文件，不然不会触发你的接口请求。

②接口请求错误 Current request is not a multipart request。或者其他的请求错误。

大部分是因为没有设置接口的请求头，请将请求头中添加：

Content-Type: multipart/form-data;

 

 

③ 第二个文件上传没有覆盖第一个文件

请检查你的组件引入时是否在组件标签中标明了。

ref="upload"