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

文件上传要素

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

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

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

4. 后端接收，处理上传数据。

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);