Picture storage can be stored in the cloud, the front end transmits the picture to the back end, and the back end transmits the picture to the cloud space in the form of data stream;

Picture storage, can also be stored in a specific folder in the project, no longer need to be stored on the cloud (except for backup);

Qiniu Cloud Node.js SDK official description: https://developer.qiniu.com/kodo/sdk/1289/nodejs

Technical framework: https://github.com/TaleLin/lin-cms-vue

Uploaded key code file.js

front end

<input type="file" name="file" @change="fileChange" accept=".png,.jpg,.jpeg">

The front end cannot get the local disk path of the picture, only a similar webkitRelativePath is still an empty string.

fileChange (e) {
    const fileMsg = e.target.files[0];
    console.log(fileMsg);
},

Someone said that I could get it when I checked the information. I tried the methods given, and there were browser compatibility issues, but I couldn't get the absolute disk path.

//图片路径
function getObjectURL(file) {
var url = null;
if(window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if(window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if(window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}

The following sample code (test environment) is to store the picture locally in the project, get an absolute storage address, and then upload it to the cloud space using the Qiniu cloud interface.

'use strict';

const {LinRouter,ParametersException} = require('lin-mizar');

const {LocalUploader} = require('../../extensions/file/local-uploader');

const path = require('path');

const qiniu = require("qiniu");

const file = new LinRouter({prefix: '/cms/file'});

file.post('/', async ctx => {

const files = await ctx.multipart();

if (files.length < 1) {

throw new ParametersException({

msg:'The file resource that meets the conditions was not found'

});

}

const uploader = new LocalUploader ();

const arr = await uploader.upload(files);

console.log(arr);

ctx.json(arr);

const accessKey ='Fill in ak here';

const secretKey ='Fill in sk here';

var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);

const bucket ='room930'; //Space to upload

var options = {scope: bucket};

var putPolicy = new qiniu.rs.PutPolicy(options);

var uploadToken = putPolicy.uploadToken (mac);

var key = files[0].filename;

var localFile = path.resolve(__dirname,'../../assets/',arr[0].path);

console.log("=========localFile========");

console.log(localFile);

console.log("=========localFile========");

var putExtra = new qiniu.form_up.PutExtra();

const config = new qiniu.conf.Config()

var formUploader = new qiniu.form_up.FormUploader(config);

// File Upload

formUploader.putFile(uploadToken, key, localFile, putExtra, function (err, ret) {

if (!err) {

// Upload is successful, processing return value

console.log (ret.hash, ret.key, ret.persistentId);

} else {

// Upload failed, processing return code

console.log(err);

}

});

module.exports = {

file

};

Remarks:

The uploaded local image address like this is not working http://localhost:5000/assets/2019/11/27/26ed361d-b0e5-4058-a309-97c7334a6b47.jpg

It needs to be like this /Users/mumu/starter/app/assets/2019/11/27/26ed361d-b0e5-4058-a309-97c7334a6b47.jpg

Get the picture download address after uploading the picture to Qiniu Cloud

//The download address space domain name + file name of Qiniuyun image file is only applicable to public space

arr[i].url ='Space domain name'+key;

https://developer.qiniu.com/kodo/sdk/1289/nodejs#6

The test domain name provided by Qiniu Cloud has a limited validity period, and you still need to bind your own domain name.

If you only buy a domain name, you can use the second-level domain name (defined at will) to bind it, instead of directly using the primary domain name, it will conflict with the domain name resolution of the domain name service provider.

The first-level domain name is registered, and the second-level domain name does not need to be registered.

Private space and empty space are only different when reading data. Private space requires authentication, and other modifications and deletion operations are the same.

Qiniu Cloud image upload Node.js SDK

Uploaded key code file.js

Guess you like