首先，文件上传那些事儿，从头补一下https://cloud.tencent.com/developer/article/1004961
- 第一个坑，koa-body的ctx.request获取
一开始没有明确需求，以为需要先把文件写到后端，然后再上传腾讯云。所以研究了下koa-body怎么用文件流读写文件到后端。
然后在获取ctx.request.body.files.file时怎么都获取不到
感谢https://www.jianshu.com/p/34d0e1a5ac70
严正提醒：
新版本的koa-body通过ctx.request.files获取上传的文件
旧版本的koa-body通过ctx.request.body.files获取上传的文件
- 第二个坑，表单上传前的图片宽高获取
由于需要在后端请求一个需要当前图片宽高的接口，而formData中的file并虽然有name、size信息，但是并没有图片的宽高信息
于是在前端获取宽高，并传送给后端。
-
- tip1：表单提交前宽高获取
这里我用的element-ui，前端代码如下
<template> <el-upload class="upload-demo" action="/api/uploadFile" :on-preview="handlePreview" :on-remove="handleRemove" :before-upload="getWidth" :file-list="fileList" list-type="picture" :data="pictureUpload" > <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> </el-upload> </template>
https://www.haorooms.com/post/js_webapi_filereader
<script> export default { name: "upload", data(){ return { pictureUpload: { width: 0, height: 0 } } }, methods: { handleRemove(file, fileList) { console.log(file, fileList); }, handlePreview(file) { console.log(file); }, getWidth(file) { // 获取文件尺寸 let _this = this; return new Promise(function(resolve, reject) { let reader = new FileReader() reader.readAsDataURL(file) reader.onload = function(theFile) { let image = new Image() image.src = theFile.target.result image.onload = function() { console.log(`${this.width}*${this.height}`) console.log(this.width,this.height) console.log(_this.fileList) _this.pictureUpload.width = this.width; _this.pictureUpload.height = this.height; resolve(file); } } }) } } } </script> -
- tip2: 在后端如何接收
Form Data里面的宽高呢？其实用ctx.request.body就可以取到了，和files不同
- tip2: 在后端如何接收
Form Data里面的宽高呢？其实用ctx.request.body就可以取到了，和files不同 var info = require('../config/info') var Uploader = require('../modules/cos-uploader') var JsonProxy = require('../modules/cos-uploader') var fs = require("fs") var path = require("path") const crypto = require('crypto'); let jprxClient = new JsonProxy({env: 'beta'}); async function uploadFile (ctx, next) { let file = ctx.request.files.file;// 获取上传文件 let userInfo = { "account": "122333221", "loginkey": "aaaaaaaaaaaaaaaaaa", } // 请求cosPath的参数 let hash = crypto.createHash('sha1'); let buffer = fs.readFileSync(file.path); hash.update(buffer); let sha1 = hash.digest('hex'); let opts = { "authCtx": userInfo, "photoInfo": { "name": file.name, "size": file.size, "sha": sha1, "width": ctx.request.body.width, "height": ctx.request.body.height } }; console.log('opts__________________',opts) let cosPath = ''; // 接口请求省略 // 上传腾讯云 let localPath = file.path; let groupId = "temp"; let remotePath = _getRemotePath(localPath, groupId); let uploader = new Uploader({ // AppId: info.cos.AppId, SecretId: info.cos.SecretId, SecretKey: info.cos.SecretKey }); let uploadOptions = { bucket: info.cos.Bucket+ '-' + info.cos.AppId, region: info.cos.Region, remotePath: remotePath, localPath: localPath }; console.log('uploadOptions', uploadOptions); let uploadResult = await uploader.up(uploadOptions); console.log('upLoadResult____________________',uploadResult); if(uploadResult.statusCode == 200) { let opts = { "authCtx": userInfo, "sha": sha1 }; console.log('callBackOpts____________________________',opts) // 请求接口省略 ctx.body = { location: uploadResult.Location, status: 0, message: 'success' } }else { ctx.body = { status: -1, message: uploadResult } } } // 可获取cosPath后不需要 function _getRemotePath(filePath, groupId) { var groupId = groupId || 'common_group_id'; var hash = crypto.createHmac('sha256', 'useforalbums').update(fs.readFileSync(filePath)).digest('hex'); return `albumgroup_${global._ENV === 'production' ? 'production' : 'beta'}/${groupId}/${hash}`; } module.exports = { uploadFile, };