vue3中怎么使用el-upload上传文件

本文小编为大家详细介绍“vue3中怎么使用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上传文件”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。