一、确定图片上传接口
const UPLOADURL='http://localhost:7001/admin/upload';
根据要求写,这种只是展示,不规范,正常情况下只出现一次端口号,其余均是拼接。
二、页面引入(利用element组件)
<el-form-item prop="sthumb" label="缩略图">
<el-upload class="avatar-uploader"
:action="uploadpath"
:show-file-list="false"
:on-success="handlerImgUpload">
<img v-if="editScienceForm.sthumb" :src="imgpath+editScienceForm.sthumb" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
import {UPLOADURL} from "../../api/paths";
export default {
data(){
return{
uploadpath:UPLOADURL,
}
}
handlerImgUpload(res){
if(res.code === 200){
this.editScienceForm.sthumb = res.url;
}else{
this.$message.warning(res.msg);
}
},
三、处理上传
'use strict';
const fs = require('fs');
const path = require('path');
const moment = require('moment');//处理时间
const sendToWormhole = require('stream-wormhole');
const Controller = require('egg').Controller;
class UploadController extends Controller {
async create() {
const { ctx } = this;
const stream = await ctx.getFileStream();
let uploadDir = 'app/public/uploads/';
let date = moment().format('YYYY-MM-DD');
let dateDir = uploadDir+'/'+date;
if(!fs.existsSync(dateDir)){
fs.mkdirSync(dateDir);
}
let filename = ""+Date.now() + Math.floor(Math.random()*10000);//给上传一个名字,不能重复,一般都写与时间相关的,在加点密
let ext = path.extname(stream.filename);
let picname = filename + ext;
let movepath = path.join(dateDir,picname);
let wStream = fs.createWriteStream(movepath);
try{
stream.pipe(wStream);
ctx.body = {
code:200,
msg:'',
url:'/public/uploads/'+date+'/'+picname
}
}catch (err) {
// 必须将上传的文件流消费掉,要不然浏览器响应会卡死
await sendToWormhole(stream);
ctx.body={
code:400,
msg:"文件上传失败"
}
throw err;
}
}
}
module.exports = UploadController;
//记得处理上传途径,按自己写的来
// 上传照片
require('./router/admin/upload')(app);
module.exports = app => {
const { router , controller }=app;
router.resources('/admin/upload',controller.admin.upload)
}
这是简易版的,给大家提供一个参考,希望有所帮助!