前言在Vue3项目中，如果我们要上传图片，一般可以使用element-ui中的el-upload。为了避免代码重复，我们可以自己封装一个图片上传组件。其中，主要的实现思路是前端使用el-upload组件选择上传的图片，利用其http-request属性定义一个函数实现文件上传请求：请求函数使用对象存储七牛云的，通过后端获取证书token上传后，后面实现文件上传。后端代码使用express框架获取七牛云上传证书响应前端项目结构-routes|-token.js|-index.js-app.js-config.js-package.jsonInstall七牛云SDK：npmiqiniu获取上传证书，编写获取上传证书的相关代码：/*config.js*/constqiniu=require('qiniu')//创建上传证书constaccessKey='*****'//这里填七牛云的accessKeyconstsecretKey='*****'//这里填七牛云的secretKeyconstmac=newqiniu.auth.digest.Mac(accessKey,secretKey)constoptions={scope:'*****',//这里填写七牛云空间名称expires:60*60*24*7//这里是证书的有效时间，默认为一小时}constputPolicy=newqiniu.rs.PutPolicy(options)constuploadToken=putPolicy.uploadToken(mac)module.exports={uploadToken}配置路由token.jsconsttokenRouter=require('express').Router()constqnconfig=require('../config')//导入七牛云配置tokenRouter.get('/qiniu',(req,res,next)=>{res.status(200).send(qnconfig.uploadToken)})module.exports=tokenRouterindex.jsconsttoken=require('./token')module.exports=routes=(app)=>{app.use('/token',token)//可以通过/token/qiniu获取上传证书}projectstartconstexpress=require('express')constbodyparse=require('body-parser')constrouters=require('./route')//创建服务constapp=express()//解析数据app.use(bodyparse.json())//路由routes(app)//监听3000端口app.listen(3000,()=>{console.log('thisserverarerunningonlocalhost:3000!')})使用命令nodeapp.js启动项目，然后访问http://localhost:3000/token/qiniu获取上传证书。前端代码配置跨域。因为前后端项目运行在不同的端口，所以需要解决跨域问题。这里是vite.config.js中的解决方法如下：server:{proxy:{'/api':{target:'http://localhost:3000',changeOrigin:true,rewrite:(path)=>path.replace(/^\/api/,'')}}}在使用父组件的时候，我们希望子组件可以上传一张图片，得到一串url，父组件可以接受，它的显示上传的图片时需要指定size或者有默认值。
