❝

I haven’t updated my tweets for a long time. I am also working on a small project these days. At the beginning, I thought of facial recognition and uploading videos to Qiuniuyun, but later I thought I didn’t need this function, but I didn’t know until I realized it. So let’s write about the upload function.

❞

preface

We all know that seven Niuyun is an online cloud storage space, you can upload some pictures, videos and other multimedia resources, for small projects is very convenient. However, it seems that its storage space will expire in a month, and your resources may not be accessible (charge).

I accidentally came into contact with this function because during the process of making small programs, the recorded video cannot be transcoded to Base64 format (real machine debugging mode). Developer tool debugging is normal, but real machine debugging will be abnormal.

I found that files with the beginning of HTTP were generated under tool debugging, and wxFile files would be generated when the real computer was installed. I suspected that this was the problem that caused me to fail to transfer base64, but later I found that there was no need to care about the beginning, and the preview was normal.

“This problem only exists in real machine debugging mode.“

The preparatory work

First of all we have to go to seven niuyun registered a developer account, I believe we will.

Then we can upload our files. But the official ones are so hard to read that I can’t read the document very well. After my own torment, I did not figure out how to obtain this uptoken. Unlike other tripartite tools, it was directly generated by them.

I have no choice but to find several articles about the generation of upload credentials and do not understand. Later I found the SDK for the small program in a Github, but there were also a lot of problems.

To find the document

I think this document is hidden or very good, looking for a long time did not find.

Small program SDK

After we get the SDK of small program, we can introduce JS file in the place we use. In the link above, find qiniu-Wxapp-sdk and click Install. The file will be downloaded to our local.

In our applet page, you will use this page to enter.

var qiniuUploader = require(".. /.. /qiniuUploader.js")
Copy the code

Project configuration

I’m sure many of you would have gone to the Github documentation of qiniu-Wxapp-SDK to look for it in the beginning, but there was nothing there about how the credentials were generated either.

Later, I found it in the details page of obtaining the certificate, but this certificate is returned by the back end for security, and the front end only needs to call API /uptoken to obtain it. So, the only solution is that we need to put this interface to get credentials on the server, so that the public network is accessible.

Running instance

After downloading the example above, the only thing we really need to use is the server.js file and a config file config.json.

server.js

var qiniu = require("qiniu");
var express = require("express");
var path = require("path")
var app = express();
app.use(express.static(__dirname + "/"));
var multiparty = require("multiparty");  var fs=require('fs'); var config=JSON.parse(fs.readFileSync(path.resolve(__dirname,"config.json")));  .Copy the code

If you look at the key code in this file, which uses the Express, Qiniu, and Multiparty dependencies, it is easy to initialize a package.json file to install the dependencies.

config.json

{
    "AccessKey": "Your AccessKey".    "SecretKey": "Your SecretKey".    "Bucket": "Space name".    "Port": 9000. "UptokenUrl": "uptoken". "Domain": "Your domain name" }  Copy the code

The file is very simple, is to do some of your seven niu Cloud space information configuration, in order to be able to upload resources to your designated space.

AccessKey/SecretKey: In your personal center, go to the key management and you can see it, but don’t give it away. Fill these two information into config.json.

AccessKey/SecretKey

Bucket: is the name of the space you create. You can create a new space in the object storage space manager. This name is Bucket.

domain

Domain: your temporary test domain


Get uptoken

Once it is clear that the upToken is generated from the back end, we deploy the server.js file above. This file is actually the interface file that provides the uptoken.

directory

After uploading the server, remember to install the dependencies and start with PM2. This allows you to access the interface while shutting down the server terminal. Starting with Node doesn’t help when you close the terminal.

Let’s see if it started successfully

Enter your server IP in the browser: port/API /uptoken

To be successful

Upload a file

And then when the video is uploaded, I’m going to initialize this function in the little program onload.


var qiniuUploader = require(".. /.. /qiniuUploader.js");// Remember to introduce

initQiniu() {
  var options = {
 region: 'NCN'.// North China (see the region of your space)  uptokenURL: 'https://yourserver.com/api/uptoken'.// Get upToken link above  uploadURL:'https://up-z2.qbox.me'.// Upload address  domain: 'Test domain name /'  };  qiniuUploader.init(options); } Copy the code

UploadURL is not configured in the demo01 file, but uploadURL is not configured in the demo01 file.

case 'ECN': uploadURL = 'https://up.qbox.me'; break;
case 'NCN': uploadURL = 'https://up-z1.qbox.me'; break;
case 'SCN': uploadURL = 'https://up-z2.qbox.me'; break;
case 'NA': uploadURL = 'https://up-na0.qbox.me'; break;
Copy the code

Look at your own region to write.

Finally, upload.

// Upload to 7 ox
qiniuUploader.upload(filePath, (res) => {
  console.log(res);// It returns an online address that opens your browser to access your videos, audio/pictures
}, (error) => {
  console.error('error: ' + JSON.stringify(error));
}); Copy the code

FilePath is the address where you want to record video, audio/image files, wxfile for mobile phones, HTTP for PC debugging, but it doesn’t matter, it can be uploaded to qiuyun7.

summary

After some torturing, in fact, at the beginning of our thinking should be more, online articles are also a lot of. But unfortunately none of that solved my problem.

Here I just want to say a word, if you are developing wechat mini program, at any time you should be subject to your preview. Because a lot of times it’s not your project code that has a problem, it’s the developer tools that have a problem, one is the computer path and one is the phone path, and they’re not the same.

Wx.getfilesystemmanager () could not be executed when I was debugging the machine. In the real machine debugging time, the right side of the page has been warning and error, and then automatically resume debugging and then error, it is really not an error message.