vue3中实现文件上传---通过element-plus的upload组件

简介: vue3中实现文件上传---通过element-plus的upload组件

文件上传要素


  1. 要有一个form标签,且method=post。


  1. form标签的encType属性值必须是multipart/form-data


  1. input标签的type属性值必须是file


  1. 后端接收,处理上传数据。


multipart互联网上的混合资源,就是资源由多种元素组成,form-data表示可以使用HTML Forms 和 POST 方法上传文件


自定义文件上传行为


这里我们需要自定义上传功能。http-request:覆盖默认的上传行为,可以自定义上传的实现。因为这样我们可以方便的将图片按照自己想要的格式存入数据库。这里由于上传的是json字符串数据,所以content-type:的格式就不需要multipart/form-data


import { ref } from 'vue' 
const imageUrl = ref('')
const handleRequest = (e) => {
  const fd = new FileReader()
  fd.readAsDataURL(e.file)
  // 将文件转化为base64格式传入后端
  fd.onload = () => {
    axios
      .post('http://127.0.0.1:7001/upload', {
        imgUrl: fd.result,
      })
      .then((res) => {
        imageUrl.value = res.data.data
      })
  }
  // 上传blob格式
  axios
    .post('http://127.0.0.1:7001/upload', {
      imgUrl: URL.createObjectURL(e.file),
    })
    .then((res) => {
      imageUrl.value = res.data.data
    })
}
  <el-upload action=""
             :http-request="handleRequest"
             :show-file-list="false">
    <img v-if="imageUrl"
         :src="imageUrl"
         class="avatar" />
    <div v-else>
      <i class="el-icon-plus avatar-uploader-icon"></i>
      <div class="el-upload__text">点击上传封面</div>
    </div>
    <template #tip>
      <div v-if="!imageUrl"
           class="el-upload__tip">只能上传 jpg/png 文件,且不超过 500kb</div>
    </template>
  </el-upload>


网络异常,图片无法展示
|


网络异常,图片无法展示
|


默认的上传行为


如果只是想将图片上传到后端,然后存储到文件中,我们可以使用它的默认上传行为。

此时upload组件必须指定action属性。


import { ref } from 'vue'
const imageUrl = ref('')
const handleSuccess = (response, file) => {
  imageUrl.value = URL.createObjectURL(file.raw)
}
<el-upload action="http://127.0.0.1:7001/upload"
             :show-file-list="false"
             :on-success="handleSuccess">
    <img v-if="imageUrl"
         :src="imageUrl"
         class="avatar" />
    <div v-else>
      <i class="el-icon-plus avatar-uploader-icon"></i>
      <div class="el-upload__text">点击上传封面</div>
    </div>
    <template #tip>
      <div v-if="!imageUrl"
           class="el-upload__tip">只能上传 jpg/png 文件,且不超过 500kb</div>
    </template>
  </el-upload>


后端eggjs


eggjs.github.io/zh/guide/up…


// file模式
// default.config.js 
// 解析文件上传
  config.multipart = {
    mode: 'file', // file / stream
  };
// 将上传的文件存入到文件中
// file
const { ctx } = this;
const file = ctx.request.files[0];
// console.log(file);
const readStream = fs.createReadStream(file.filepath);
const writeStream = fs.createWriteStream(path.join(__dirname,`../public/${file.filename}`));
readStream.pipe(writeStream);
//将上传的文件存入文件中
// stream模式
const stream = await ctx.getFileStream();
const writeStream = fs.createWriteStream(path.join(__dirname, `../public/${stream.filename}`));
stream.pipe(writeStream);


网络异常,图片无法展示
|


网络异常,图片无法展示
|


相关文章
|
5天前
|
JSON JavaScript 前端开发
在Vue3项目中,Vite起到的作用及其可以做的事情
Vite是Vue 3项目的关键快速开发服务器和高效的热模块替换(HMR)。它的亮点包括:使用ES模块实现快速启动和动态加载,模块级别HMR提升开发效率,Rollup打包优化生产构建。此外,Vite还支持插件系统、自定义配置、静态资源处理和现代JS特性。通过`npm create vite`可快速搭建Vue项目,配置文件`vite.config.js`可定制行为,`.env`文件管理环境变量。Vite优化了开发与构建流程,提高开发者效率并保证构建性能。
|
2天前
|
开发工具 git
vite+vue3+ts从0到1搭建企业级项目(4)
vite+vue3+ts从0到1搭建企业级项目
19 0
|
2天前
|
存储 JavaScript API
vite+vue3+ts从0到1搭建企业级项目(3)
vite+vue3+ts从0到1搭建企业级项目
15 0
|
2天前
|
资源调度 JavaScript 前端开发
vite+vue3+ts从0到1搭建企业级项目(2)
vite+vue3+ts从0到1搭建企业级项目
12 1
|
2天前
|
资源调度 JavaScript 测试技术
vite+vue3+ts从0到1搭建企业级项目(1)
vite+vue3+ts从0到1搭建企业级项目
28 0
|
2天前
|
JavaScript 前端开发 API
什么是响应式❓Vue2/Vue3中响应式的原理
什么是响应式❓Vue2/Vue3中响应式的原理
14 2
|
2天前
|
JavaScript 前端开发 编译器
跨越时代的框架对决:深度剖析Vue 2与Vue 3核心差异
跨越时代的框架对决:深度剖析Vue 2与Vue 3核心差异
11 0
|
1天前
|
JavaScript
|
2天前
|
存储 JavaScript API
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
8 2
|
4天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
59 7
使用 Vue CLI 脚手架生成 Vue 项目