遇到一个问题，就是上传的图片，在手机上可以下载了，但在电脑上怎么下载到电脑 里，包括上传的文件
点击查看页面就可以吧，在企业工作台里
我做了查看页面，小程序可以，但H5和电脑页面不行
你创建一个模型应用发布到企业工作台呢
还没有试过
移动端我们的历史教程里已经讲解了如何上传和下载文件，上传呢是依赖于表单的文件上传组件，而下载呢是依赖的小程序的文件下载API
但是附件上传到微搭里，如果是搭建PC端的应用，以上的方法就不行了。要想解决问题，我们先需要梳理几个概念。
第一个就是我回复的自定义应用和模型应用的区别。自定义应用呢可以理解为可以公开访问的应用，比如我们的H5、小程序、PC网站。
而模型应用呢可以理解为我们经常使用的网页管理后台，通常需要输入用户名和密码，登录之后有的是搭配了门户，比如可以显示待办、消息通知、常用应用和需要展示的一些通知公告信息。
如果没有复杂需求的，可能也就是简单的一个管理后台，通常左边是模块列表，右边是表格。
概念理清楚之后，要结合你自己的应用场景来进行选择。因为模型应用占用了内部账号，每个账号都需要按月支付费用，通常如果需要多人使用的，我们不建议选择搭建模型应用。而搭建自定义应用就需要考虑组件的选择问题。
微搭的组件是分为移动端的组件和PC端的组件，移动端我们因为屏幕比较小，通常是使用块状结构从上到下展示信息。而PC端应用我们通常需要使用表格组件，结合分页的功能来展示数据。
为了解决上述的问题，我们实际还原一下现实的场景。
1 搭建数据源
初学者可能有个疑问，我的附件要存放到哪里呢？这里就要梳理几个思路，第一个是附件存在哪里，第二个就是附件如何访问。
微搭的底层是使用的云开发，云开发由几个基本要素组成，云函数、云数据库、云存储。我们的附件其实是存放在云存储里。对外访问的时候要换取临时链接，这个临时链接其实就是通过域名访问的一个互联网路径。
为啥要有临时路径这个概念呢？因为你使用公有云，尤其是按量付费这种模式，很容易被攻击。对方如果猜到你的附件的存放路径，可以使用脚本批量刷量，你的套餐很容易被刷爆。为了防范这个问题，你每次访问附件的时候，给你一个临时路径，有一定的有效期，过期就失效了，这样就可以保护你的资源。
那我怎么知道我的附件在哪存放的呢？通常我们附件上传到云存储后，会给你返回一个fileid，这个fileid就表示你附件的存放路径，我们需要把这个路径存放到数据库里，这样下次就知道去哪取了。
总结一下，附件真实存放在云存储里，而附件的存放路径存放在数据库里。
概念清楚了之后，微搭是通过字段来存放路径的，登录微搭的控制台，点击新建数据模型，输入模型的名称，系统自动生成标识
点击编辑按钮进入编辑模式，可以添加字段
添加一个附件字段，字段类型选择文件
回到数据模型列表，点击更多，点击管理数据
上传一个附件
可以看到查看页面并不能下载附件
我们其实就需要修改一下查看页面，提供附件的下载功能
2 创建自定义应用
为了实现附件的下载功能，我们需要先创建一个自定义应用，应用类型的话选择支持web
输入应用名称，选择支持的平台类型
先将应用的模式切换成电脑模式
然后添加数据表格组件
数据模型选择我们创建的数据源
操作列默认只有删除按钮，我们选中操作列，添加一个查看按钮
类型选择链接
给按钮增加一个点击事件，打开页面，跳转到查看页面。我们需要先新建一个查看页面，点击页面组件区的+号
输入页面的名称
回到首页，选中我们的按钮，增加点击事件
选中打开页面
选择我们刚刚创建的附件查看页面，点击新建URL参数
输入变量标识id
选择id旁边的fx进行数据绑定，从记录列表里选择数据标识
切换到附件查看页面，添加数据详情组件，数据模型选择附件上传
默认的附件字段因为是存储的路径，所以体现的是文本形式，我们要修改一下，将文本组件替换成链接组件
我们的数据详情组件需要设置筛选条件，通过传入的Id来过滤数据
这样页面就搭建好了，现在的问题是如何将附件的路径替换成临时路径的问题，我们可以通过编写API来解决
3 创建API
点击控制台的APIs，点击新建APIs
选择自定义代码
输入名称和标识
输入方法名称和标识
输入如下代码
// 初始化
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
};
};
这里的env要替换成你自己的，登录控制台，在资源管理可以查看环境Id
因为我们需要传入fileid，因此需要创建一个入参
代码搭建好之后，点击方法测试，我们传入fileid可以看到返回的临时路径
测试成功之后点击出参映射
就完成了API的创建
4 应用中调用API
后端方法写好之后，我们需要在前端进行调用。先创建一个变量用来接收结果
在生命周期函数里我们调用后端代码并赋值给变量
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')
},
}
最后做数据绑定整体的功能就实现了
总结
我们本篇介绍了微搭PC端功能整体搭建的流程，PC端的流程一般会涉及到后端开发，这里就要会使用云开发的后端语法，前后端都熟悉之后你的应用开发就得心应手了。