«

vue3如何使用el-upload上传文件

时间：2024-3-10 21:56     作者：韩俊     分类： Javascript

这篇文章主要讲解了“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);

标签: javascript vue

热门推荐

1 详解JavaScript表单验证（E-mail 验证）
2 基于Jquery插件实现跨域异步上传文件功能
3 JavaScript类和继承 prototype属性
4 怎么在JavaScript中使用媒体查询
5 怎么打包nodejs代码
6 Three.js加载外部模型的教程详解
7 jQuery form 表单验证插件(fieldValue)校验表单
8 jQuery简单实现彩色云标签效果示例
9 javascript克隆对象深度介绍
10 JavaScript模块规范之AMD规范和CMD规范

日历

标签

hbase maven eclipse sybase PostgreSQL spring emcache oracle mongodb redis nginx golang java vue android ios mysql linux 微信小程序 css html php教程 javascript python php

搜索

最新文章

热门文章