I encountered a problem, that is, the uploaded pictures can be downloaded on the mobile phone, but how to download them to the computer on the computer, including the uploaded files
Just click to view the page, in the enterprise workbench
I made a view page, the applet is ok, but the H5 and computer pages are not
You create a model application and publish it to the enterprise workbench
haven't tried yet
On the mobile side, we have already explained how to upload and download files in our historical tutorial. Uploading depends on the file upload component of the form, while downloading depends on the file download API of the applet.
However, if the attachment is uploaded to the Weibo, if it is to build a PC-side application, the above method will not work. To solve the problem, we first need to sort out a few concepts.
The first one is the difference between the custom application and the model application I replied. Custom applications can be understood as applications that can be accessed publicly, such as our H5, applets, and PC websites.
The model application can be understood as the webpage management background we often use. Usually, you need to enter a user name and password. After logging in, some are equipped with a portal. For example, it can display to-dos, message notifications, commonly used applications, and some notifications and announcements that need to be displayed.
If there are no complicated requirements, it may be a simple management background, usually the module list is on the left and the table is on the right.
After the concept is clarified, you should make a choice based on your own application scenario. Because the model application occupies an internal account, each account needs to pay a monthly fee. Usually, if it needs to be used by multiple people, we do not recommend building a model application. To build a custom application, you need to consider the selection of components.
The components of Wechat are divided into mobile components and PC components. On the mobile side, because the screen is relatively small, we usually use a block structure to display information from top to bottom. For PC-side applications, we usually need to use table components, combined with paging functions to display data.
In order to solve the above problems, let's actually restore the real scene.
1 Build a data source
Beginners may have a question, where should my attachments be stored? Here are a few ideas to sort out. The first is where the attachments exist, and the second is how to access the attachments.
The bottom layer of the micro-build is the cloud development used. Cloud development consists of several basic elements, such as cloud functions, cloud databases, and cloud storage. Our attachments are actually stored in cloud storage. When visiting externally, you need to exchange for a temporary link. This temporary link is actually an Internet path accessed through a domain name.
Why do we have the concept of a temporary path? Because you use the public cloud, especially the pay-as-you-go model, it is easy to be attacked. If the other party guesses the storage path of your attachments, you can use the script to batch the amount, and your package is easy to be maxed out. In order to prevent this problem, every time you access the attachment, you will be given a temporary path with a certain validity period, and it will become invalid after the expiration date, so that your resources can be protected.
How do I know where my attachments are stored? Usually, after our attachments are uploaded to cloud storage, we will return a fileid to you. This fileid indicates the storage path of your attachments. We need to store this path in the database, so that we will know where to get it next time.
To sum up, the attachments are actually stored in the cloud storage, and the storage path of the attachments is stored in the database.
After the concept is clear, WeiTai stores the path through fields. Log in to the console of WeiTai, click New Data Model, enter the name of the model, and the system will automatically generate an identifier
Click the edit button to enter the edit mode, you can add fields
Add an attachment field, select file for the field type
Return to the data model list, click more, click manage data
to upload an attachment
You can see the view page and cannot download attachments
In fact, we need to modify the viewing page to provide the download function of attachments
2 Create a custom application
In order to realize the download function of attachments, we need to create a custom application first. For the application type, choose to support web, enter the application name, and select the
supported platform type.
First, switch the application mode to computer mode
, and then add the data table component.
Data model selection We create By default, the data source
operation column only has the delete button. We select the operation column and add a view button.
Type selection link 
Add a click event to the button, open the page, and jump to the view page. We need to create a new viewing page first, click the + sign in the page component area , enter
the name of the page
, go back to the home page, select our button, add a click event, select
Open Page
, select the attachment viewing page we just created, and click New URL parameter
input variable identification id
Select fx next to id for data binding, select the data identifier from the record list
, switch to the attachment viewing page, add the data details component, and select the attachment upload for the data model
. The default attachment field is in the form of text because it is the storage path. , we need to modify it and replace the text component with a link component.
Our data detail component needs to set filter conditions, filter the data through the incoming Id,
and the page is built. The problem now is how to replace the path of the attachment with a temporary Path problem, we can solve it by writing API
3 Create APIs
Click APIs in the console, click New APIs and
select custom code
Enter name and ID
Enter method name and ID
Enter the following code
// 初始化
const tcb = require('@cloudbase/node-sdk')
const app = tcb.init({
env:'***'
})
module.exports = async function (params, context) {
const result = await app.getTempFileURL({
fileList: [params.fileid]
})
// 在这里返回这个方法的结果，需要与出参定义的结构映射
return {
tempfileurl: result.fileList[0].tempFileURL
};
};
The env here should be replaced with your own, log in to the console, and you can view the environment ID in the resource management
Because we need to pass in the fileid, we need to create an input
parameter. After the code is built, click the method test, and we can pass in the fileid to see the returned temporary path.
After the test is successful, click the output parameter mapping
to complete the creation of the API
4 Call the API in the application
After the backend method is written, we need to call it on the frontend. First create a variable to receive the result.
In the life cycle function, we call the backend code and assign it to the variable
export default {
async onPageLoad(query) {
//console.log('---------> LifeCycle onPageLoad', query)
const result = await app.cloud.callConnector({
name:'getTempFile_6rns96m',
methodName:'getTempFilePath',
params:{
fileid:$page.dataset.params.tempfileid
}
})
console.log($page.dataset.params.tempfileid,result)
$page.dataset.state.tempfile = result.tempfileurl
},
onPageShow() {
//console.log('---------> LifeCycle onPageShow')
},
onPageReady() {
//console.log('---------> LifeCycle onPageReady')
},
onPageHide() {
//console.log('---------> LifeCycle onPageHide')
},
onPageUnload() {
//console.log('---------> LifeCycle onPageUnload')
},
}
Finally, the overall function of data binding is realized.
Summarize
In this article, we introduce the overall process of building the PC-side functions of the micro-build. The process of the PC-side generally involves back-end development. Here, you will use the back-end grammar of cloud development. After you are familiar with the front-end and back-end, your application development will be handy. .