vue3使用el-upload上传文件示例详解

时间2024-02-11 03:40:03发布访客分类VUE浏览527

导读：收集整理的这篇文章主要介绍了vue3使用el-upload上传文件示例详解，觉得挺不错的，现在分享给大家，也给大家做个参考。目录el-upload上传文件属性方法上传图片的实现存在的坑...

收集整理的这篇文章主要介绍了vue3使用el-upload上传文件示例详解，觉得挺不错的，现在分享给大家，也给大家做个参考。

el-upload上传文件

在项目开发的过程中上传文件的需求是经常会遇到的，这篇文章我们就详细介绍使用elementplus中el-upload来上传文件了。

我们先来看一下el-upload可以配置哪些属性和事件。

属性

action: 请求url
headers: 设置上传的请求头部
method: 设置上传请求方法
multiple: 是否支持多选文件
data: 上传时附带的额外参数
name: 上传的文件字段名
wITh-credentials: 支持发送cookie凭证信息

以上这些参数都是采用action的默认方式请求时使用的，如果我们使用自定义的请求方法，这些属性基本上都不会使用到。

show-file-list: 是否显示已上传文件列表
Drag: 是否启用拖拽上传
accept: 接受上传的文件类型
on-preview: 点击文件列表中已上传文件时的钩子
on-remove: 文件列表移除文件时的钩子
on-success: 文件上传成功时的钩子
on-error: 文件上传失败时的钩子
on-PRogress: 文件上传时的钩子
on-change: 文件状态改变时的钩子，添加，上传成功和失败都会被调用
on-exceed: 当超出限制时执行的钩子
before-upload: 文件上传之前的钩子，参数为上传的文件，若返回false或者返回 Promise 且被 reject，则停止上传。
before-remove: 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
file-list/v-model:file-list: 默认上传文件
list-tyPE: 文件列表的类型，'text' | 'picture' | 'picture-card'。
auto-upload: 是否自动上传文件
http-request: 覆盖默认的 Xhr 行为，允许自行实现上传文件的请求
disabled: 是否禁用上传
limit: 允许上传文件的最大数量

方法

abort: 取消上传请求
submit: 手动上传文件列表
clearFiles: 清空已上传的文件列表（该方法不支持在 before-upload 中调用）
handleStart: 手动选择文件
handleRemove: 手动移除文件。 file 和rawFile 已被合并。

上传图片的实现

上传图片的时候我们一般都会重写http请求，不使用默认的action去请求，因此action我们一般都会设置成‘#’。

template>
      div>
        el-upload      action="#"      :headers="headers"      :list-type="listType"      :http-request="uploadAction"      :on-exceed="handleExceed"      :on-remove="handleRemove"      :before-upload="beforeUpload"      :on-success="uploadSuccess"      :on-error="uploadError"      :on-progress="uploadProgress"      :file-list="fileListCopy.data"      ref="upload"      :multiple="true"      :limit='limit'      :disabled="disabled"      :data="paramData"    >
        el-icon>
    Plus />
    /el-icon>
    template #file="{
 file }
    ">
          div>
            img :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="handleRemove(file)"          >
                el-icon>
    Delete />
    /el-icon>
              /span>
            /span>
          /div>
        /template>
        /el-upload>
        el-diaLOG v-model="previewVisible">
          img w-full :src="dialogImageUrl" alt="Preview Image" />
        /el-dialog>
      /div>
    /template>
    script>
export default {
  name: 'uploadImg'}
    /script>
    script SETUP>
import {
 Delete, Plus, ZoomIn }
     From '@element-plus/icons-vue';
import {
 reactive, ref, defineProps, defineEmits, computed, getcurrentInstance }
     from 'vue';
import {
 ElMessage }
     from 'element-plus';
const props = defineProps({
  // 允许上传文件件的最大数量  limit:{
    type:Number  }
,  // 是否禁用上传  disabled:{
    type:Boolean,    default:false  }
,  // 文件列表类型  listType:{
    type:String,    default:'picture-card'  }
,  // 上传时携带的额外参数  paramData: {
    type:String  }
}
    );
    const emits = defineEmits([]);
    const cns = getCurrentInstance();
    const globObj = cns.appContext.config.globalProperties;
    const previewVisible = ref(false);
    const dialogImageUrl = ref('');
const fileListCopy = reactive({
  data: []}
    );
    const onece = ref(false);
    const myChangeFile = ref('');
    const changeFileindex = ref(-1);
const uploadImgArr = reactive({
  data: []}
    );
const headers = reactive({
}
    );
    // 预览大图const handlePictureCardPreview = (uploaDFile) =>
 {
      dialogImageUrl.value = uploadFile.url;
      previewVisible.value = true;
}
    ;
    // 移除图片const handleRemove = (file, fileList) =>
 {
      console.log('handleRemove', handleRemove);
      console.log('file', file);
      console.log('fileList', fileList);
      fileListCopy.data = fileListCopy.data.filter(v =>
     v.uid !== file.uid);
}
    ;
    // 文件上传数量限制const handleExceed = (files, fileList) =>
 {
  if (props.limit) {
    ElMessage.error(`只能上传${
props.limit}
    张图片`);
  }
      console.log('handleExceed', handleExceed);
      console.log('files', files);
      console.log('fileList', fileList);
}
    ;
    // 上传请求const uploadAction = (option) =>
 {
      let formData = new FormData();
      const url = '';
  globObj.$axios({
    url: url,    method: 'post',    transformRequest: [function(data, headers) {
      // 去除post请求默认的Content-Type      delete headers['Content-Type']      return data    }
],    data: formData,    timeout: 300000  }
    ).then(res =>
 {
        ElMessage.success('资产添加成功');
  }
    ).catch((err) =>
 {
        console.log(err);
  }
    );
}
    // 格式大小的限制const beforeUpload = (file) =>
 {
      let isjpg = false,  fileType = file.type.split('/')[0];
  if(file.type === "image/jpeg" || file.type === "image/png") {
        isJPG = true;
  }
 else {
        isJPG = false;
  }
      const isLt2M = file.size / 1024 / 1024;
      if (fileType != 'image' || isLt2M >
 2) {
        ElMessage.error("请上传2M以内的图片文件!");
    return false  }
      return true;
}
    ;
    // 文件上传成功时的钩子const uploadSuccess = (response, file, fileList) =>
 {
      // 上传成功之后后台返回的数据  console.log('uploadSuccess', uploadSuccess);
}
    ;
    const uploadProgress = (e, file, fileList) =>
 {
  console.log('uploadProgress', uploadProgress)}
    ;
    const uploadError = (err, file, fileList) =>
 {
      console.log('uploadError', uploadError);
}
    ;
    /script>

存在的坑

一般上传文件的话请求头中的Content-Type: multipart/form-data; 我们的需求中还需要设置文件的随机数，因此请求头需要是这样的Content-Type: multipart/form-data; boundary=----webkitFormBoundarypzSlbADtTRuFx5fc。

下面是我遇到的问题。

问题1

设置了Content-Type: multipart/form-data; 此时请求一直没有随机数boundary=----WebKitFormBoundarypzSlbADtTRuFx5FC。

如果设置了全局的content-type,会发现上传接口设置multipart/form-data是不起作用的，因为没有Boundary，所以上传必定失败，服务器500。

然后尝试手动添加Boundary，这次错误变400了

问题2

后来通过查询资料，说不用设置Content-Type: multipart/form-data; 只要参数是formData形式，浏览器就会自动将请求头的Content-Type转成Content-Type: multipart/form-data; boundary=----WebKitFormBoundarypzSlbADtTRuFx5FC。

但是我不设置的话就是默认的application/json。

于是查阅资料发现axios的transformRequest属性可以在向服务器发送请求数据之前修改请求数据，因为我们的请求在默认的post请求方式时Content-Type的值是application/json，需要去掉默认的值，这样浏览器就可以自动添加了。

  globObj.$axios({
    url: url,    method: 'post',    transformRequest: [function(data, headers) {
      // 去除post请求默认的Content-Type      delete headers['Content-Type']      return data    }
],    data: formData,    timeout: 300000  }
    ).then(res =>
 {
        ElMessage.success('资产添加成功');
  }
    ).catch((err) =>
 {
        console.log(err);
  }
    );

问题3

如果还要传其他的参数，其他的参数必须也要append进去，否则可能会报参数错误。

const formData = new FormData();
    formData.append('file', file);
    // 其他参数formData.append('mailSys', mailSys);

以上就是vue3使用el-upload上传文件示例详解的详细内容，更多关于vue3 el-upload上传文件的资料请关注其它相关文章！

您可能感兴趣的文章:

vue el-upload上传文件的示例代码
vue使用el-upload上传文件及Feign服务间传递文件的方法
Vue导入excel文件的两种方式(form表单和el-upload)
vue使用el-upload实现文件上传功能
vue项目ElementUI组件中el-upload组件与图片裁剪功能组件结合使用详解

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

若转载请注明出处： vue3使用el-upload上传文件示例详解
本文地址： https://pptw.com/jishu/609271.html

Vue中金额、日期格式化插件@formatjs/intl的使用及说明 Vue如何引入全局过滤器