The WeChat applet is connected to qiniu cloud storage, and the applet is connected to Niu cloud

The method for connecting the applet to the qiniu cloud storage, and the applet to connect

Preface:

I have been doing a small program for some time. I would like to summarize the technical points I have done and I would like to contribute to my friends! In this project, three cloud-based storage services are required: Image Storage, video storage, and recording storage.

I. Interconnection Between pictures, videos, and recordings

Preparations:

A. You need to have a qiniu account. After real-name authentication, there is a key in the qiniu personal center. It is required for uploading. This pair of key is configured on the backend. You can set the allowed upload format or any format to upload the key. Let's take a look at it. In addition, you also need to create a new bucket in the object storage service of qiniu. The files to be uploaded are stored in the space you created. If you want to facilitate management, you can also create a bucket for images, videos, recordings, and others. The bucket name must also be configured on the backend.

B. an upload token is required. A file upload corresponds to a token. The upload token is also time-sensitive. The backend configuration is 1 h, which is enough for you to complete the upload operation. This token is generated by our own backend. The front-end call interface gets the token, or, like me, directly leaves the interface behind [uptokenURL], and qiniu will retrieve it by itself. We can also get the token first and then drop it to qiniu.

UptokenURL: 'https: // response

Uptoken: token, uploadURL: 'https: // up. qbox. me', // East China

C. qiniuUploader. js, which can be downloaded from qiniu's js file. There is a small program SDK in it. decompress it and find the qiniuUploader. js in it. On the page you need to upload, import this js. Https://developer.qiniu.com/sdk#community-sdk

1. upload images to qiniu

You can use the applet method to add or take a local image. Then you will get the temporary path of the image returned by the method. We can maintain images in an array so that they are uploaded in a queue when uploading qiniu.

ConstqiniuUploader = require (".. /.. /libs/qiniuUploader. js "); var sourceType = [['camera '], ['alipay'], ['camera', 'alipay']; var sizeType = [['computed'], ['original'], ['computed', 'original']; var imageArray = []; // click an event, select an image from a local album or use a camera to take a photo. ChooseImage: function (e) {var that = this; wx. chooseImage ({sourceType: sourceType [this. data. sourceTypeIndex], sizeType: sizeType [this. data. sizeTypeIndex], count: this. data. count [this. data. countIndex], // This count can be used to delete the current image success: function (res) {// return the local file path of the photo, tempFilePath can be used as the src attribute of the img label to display the image vartempFilePaths = res. tempFilePaths; imageArray. push (tempFilePaths); that. setData ({imageList: tempFilePaths}) that. pictureUploadqiniuMethod (imageArray, "tupian _") ;},}, // after obtaining the image path array, prepare to upload qiniu pictureUploadqiniuMethod: function (imageArray, fileHead) {var that = this; for (vari = 0; I <imageArray. length; I ++) {var filePath = imageArray [I]; var imgName = filePath. substr (30,50); qiniuUploader. upload (filePath, (res) =>{// the upload is successful. An image is uploaded successfully. Enter this method once, that is, a console is returned. log (res)}, (error) => {// Image Upload Failed. You can add an err error returned value console in the js of qiniu. log ('error: '+ error)}, {domain: 'oqxfq54dn .bkt.clouddn.com', uptokenURL: 'https: // success, uploadURL: 'https: // up. qbox. me ', // East China key: fileHead + imgName, // custom file keyregion: 'ecn ',});}},

The code in the red line box is qiniuUploader. in the js file, I added an if judgment. In order to prevent data from being returned even though the upload is successful, the error will not be reported directly when the code is obtained in line 112.

 

Explanation ::

ImageArray: array of temporary image addresses to be uploaded.

FileHead: Customize the header for uploading the file name of qiniu. to distinguish between uploaded files, such as slice, video, recording, and others,

ImgName: Custom upload of qiniu file name, front-end processing, I simply by intercepting the temporary path (filePath) 30-50 characters as stored in qiniu file name, even if you have added two identical images, the temporary path that the applet gives you is different, so there will be no duplicate names.

Domain: used to download resources. If this parameter is set, the res. ImageURL field returned in the uploaded success is a file address that can be accessed directly with http. Otherwise, you need to splice it yourself.

Key: The final file name stored in qiniu. The image file name here is = File Header + pseudo file name (imgName)

UploadURL: the bucket that uploads data to qiniu. the upload region and the upload region code must correspond to each other.

Region: Upload the region code.

ShouldUseQiniuFileName: indicates whether the file name is defined by qiniu. If it is true, the file key is allocated by the qiniu server (Global deduplication ). The default value is false, which is defined by ourselves. If the key is set, the priority is the highest.

Qiniu storage region table:

In this way, the qiniuUploader. js of qiniu can be called on the upload page.

Problems:

Possible causes of upload failure of an image, video, or recording:

① The size of the uploaded file is not allowed by the backend. The image size is generally less than 3 MB. Video/recording I am limited to less than 1 M

② The Upload file format is not allowed at the backend.

③ Failed to get the token, for example, qiniuUploader of qininiu. the js file obtains the token through the interface. The default value is [var token = res. data. token;], and the token returned by Our backend interface is like this

So I need to change it to [var token = res. data. extra;] In the js file of qiniu, or change it to the backend.

2. video upload qiniu

Video upload and Image Upload are a routine, but the file format is different. A video is usually a file. Unlike multiple images, a queue is required for uploading. So upload the video as follows:

// Bind the event and add the video chooseVideo: function (res) {var that = this; wx. chooseVideo ({sourceType: sourceType [this. data. sourceTypeIndex], camera: camera [this. data. cameraIndex], maxDuration: duration [this. data. durationIndex], success: function (res) {var shipinFile = res. tempFilePath; that. setData ({src: shipinFile}); // After the user finds and selects an image, call the upload method that. shipinUploadqiniuMethod (shipinFile, "shipin _") ;}}, // video upload qini shipinUploadqiniuMethod: function (shipinFile, fileHead) {var that = this; var shipinName = shipinFile. substr (30,50); qiniuUploader. upload (shipinFile, (res) =>{// console for successful video upload. log (res)}, (error) => {// video upload failed. You can add an err error returned value console in the js file of qiniu. log ('error: '+ error)}, {domain: 'oqxfq54dn .bkt.clouddn.com', uptokenURL: 'https: // success, uploadURL: 'https: // up. qbox. me ', // East China key: fileHead + shipinName, // custom file keyregion: 'ecn', // East China Region Code });}},

3. Upload the Recording files to qiniu

The recording format of the applet is silk. You can use this method to upload a video. However, although the upload is successful, the status code is 403, and qiniu does not return data, as shown in the following code:

Data can be normally returned during normal upload, And the status code is 200

The silk format of the backend configuration is allowed. This should be correct.

If the upload is successful, qiniu does not return data. The data contains an online address of qiniu, which does not return how we accessed it. Now we can transfer the audio file to our server. This is the only option currently.

Here is the official documentation for connecting small programs to qiniu cloud storage:

Https://github.com/gpake/qiniu-wxapp-sdk/blob/master/README.md? Ref = pai.qiniu.com

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.