文件上传要素
- 要有一个form标签，且method=post。
- form标签的encType属性值必须是
multipart/form-data
- input标签的type属性值必须是file
- 后端接收，处理上传数据。
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
// 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);
网络异常，图片无法展示
|
网络异常，图片无法展示
|
