Background KOA listens to request routing, processes data, generates a URL for the uploaded image and returns it to the front end. The front end submits the URL, together with other data, to the back end and writes it into the database

Vue front-end code section <el-upload action="http://localhost:3001/api/upload"// Upload image address list-type="picture-card"// Allow multiple images to be selected :on-preview="preview"// Click to view image preview processing method :on-success="afterSuccessUpload"// Callback after automatic upload success > < I class="el-icon-plus"></i>
 </el-upload>
<el-dialog :visible.sync="dialogVisible"<img width= "<img width="100%" :src="dialogImageUrl"Alt /> </el-dialog> Methods Methods: Preview (file) {this.dialogImageurl = file.url; this.dialogVisible =true; }, afterSuccessUpload(file) {console.log(file) {console.log(file)},Copy the code

The following is the processing method of the KOA background. If the KOA-Multer plug-in needs to be used, it will first encapsulate an upload method and put it into the Models directory, so that the subsequent code can use the KOA background routing to listen for the UPLOAD request of post, and then call the Upload method to process the uploaded file, generate the link and return it to the front end

Const multer = require(const multer = require('koa-multer')
const path=require("path");
const destPath=path.join(__dirname,".. /uploadImgs"); // set var storage = multer.diskStorage({// file path destination:function(req, file, cb) {cb(null, destPath)}, // Modify the filename filename:function (req, file, cb) {
        var fileFormat = (file.originalname).split("."); Char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char char"."+ fileFormat[fileFormat.length - 1]); }}) var upload = multer({storage: storage, limits: {fileSize: 1024*1024/2 // limit 512KB}}); module.exports=upload;Copy the code

With the above modules exposed, the KOA routing method can be used

Const upload = require(const upload = require(".. /models/upload.js")
router.post('/upload', upload.single('file'Body = {filename: ctx.req.file.filename}}), async (CTX, next) => {ctx.body = {filename: ctx.req.file.filename}}Copy the code

· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · below is vue + koa uploaded to seven NiuYun case To upload pictures to Qiuniuyun, the front end needs a token for authorization. The difficulty is to use the back-end KOA to generate a token and authorize the front end. Before each upload, the front end applies for a token to the back end, and the front end sends a picture URL to qiuniuyun. Submit it to the background and write it to the database

First, the server issues the certificate to upload to the front end, the front end carries the certificate, adopts the way of "client direct transmission" to upload directly to Qiniu Cloud. Write the back end first, using the official Node.js SDK 1. Const qiniu = require(const qiniu = require();"qiniu"); Router.get ("/getuploadtoken", async (ctx, next) => {
    const accessKey = 'MxExXov-'; // AK const secretKey = in key management'ETapkF'; // SK const bucket ="vueimgs"; // Create storage space folder name const MAC = new qiniu.auth.digest.mac (accessKey, secretKey); Const options = {scope: bucket, expires: 3600 * 24, // Expiration time}; const putPolicy = new qiniu.rs.PutPolicy(options); const uploadToken = putPolicy.uploadToken(mac); ctx.body = uploadToken; // When the front-end requests the token, the generated token is returned to the front-end}) vue front-end <el-upload action="http://upload.qiniup.com"// This address is related to the region selected at the time of the creation of the seven cows"picture-card"
            :on-preview="preview"
            :on-success="afterSuccessUpload"
            :data="postData"
          >
            <i class="el-icon-plus"></ I ></ el-upload> where :data="postData"PostData: {token: = postData; postData: = postData; postData: = postData;""} created creates a token by calling a method defined in methodsgetUploadToken(){
      this.$http.get("/getuploadtoken") .then(res=>{ this.postData.token=res.data; AfterSuccessUpload (res) {this.form.img ="http://py0mg402k.bkt.clouddn.com/"+ res.key; }, select the image and upload it directly. After uploading, the bucket file URL +res.key will be returned to the front end to generate the image linkCopy the code

Token token token token token token token token token token token