前端

这里采用的是将图片转为base64然后传到后端

 const uploadFile=()=>{
            var imageFileName="";
            var imgURL=document.querySelector('#upload-file').files[0];
            imageFileName=imgURL.name

            //图片预览部分
            //var img=document.querySelector('#preview-img')
            //这个URL是blob的,仅做展示用
            //img.src= window.URL.createObjectURL(imgURL)

            //转为base64,存储在数据库中
            var reader = new FileReader();
            reader.readAsDataURL(imgURL);//发起异步请求
            reader.onload =function(res){
                //读取完成后，数据保存在对象的result属性中
                // console.log(this.result)
                // console.log(res);
                imageURL.value= this.result
                //这里一定要用promise,不然有可能转码未结束就发数据了
                //后端就拿不到数据
                return new Promise((resolve,reject)=>{
                    resolve(imageURL.value)
                })
                .then(res=>{
                   
                    let data={
                        imageURL:res,
                        imageFileName:imageFileName
                    }
                    //以json形式传比较好获取数据---
                    //如果有错误就改成用base64传
                    axios({
                        method:'POST',
                        headers: { 'Content-Type': 'application/json;charset=UTF-8' },
                        data:data,
                        url:"http://127.0.0.1:7001/saveImage"
                    })
                    .then(res=>{
                        if(res.data.data==1)
                        {
                            //重新请求数据
                             axios({
                                method:'get',
                                url:`${baseURL}/getImageList`
                            })
                            .then(res=>{
                                imageList.value=res.data.data;
                                ElMessage.success({
                                    message:'上传成功'
                                })
                            })
                        }
                    })
                })
                
            }
            //图片存储部分(只能后端保存图片到文件夹,前端不能保存)
            
        }

后端

async saveImage(){
        const {ctx,app}=this;
        const {imageURL,imageFileName}=ctx.request.body;
        console.log(ctx.request.body.imageFileName);
        //按照base64进行存储
        const res=await app.mysql.insert('images',{"imageURL":imageURL,'imageFileName':imageFileName});
        ctx.body={
            data:res.affectedRows
        }
        
    }

参考

标签：上传,const,res,imageURL,base64,应用,data,imageFileName,图片
来源： https://blog.csdn.net/simple5960/article/details/117367763