《前端酷操作》下载上传，认真绅士小程序《动漫图片分享》

很多朋友对于《前端酷操作》下载上传，认真绅士小程序《动漫图片分享》和不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！

这个小程序态度开放，开通了上传通道。如果有非法图片，请考虑关闭频道。

下载和上传，包括之前的请求，都需要后台配置服务器地址，这里就不详细说了。

这是一个系列，其他的在之前的文章中。

整体效果

预览

这里上传选择的图片，因为是模拟器，所以没有截图。实际效果是在手机上。

下载

首页js

//点击图像tapImage(e) { const url=this.data.images[e.currentTarget.dataset.index] wx.navigateTo({ url: `./detail/index?title=${this.data.标题} url=${url}`, })}

当你点击图片时，带上图片标题和URL并在下一页显示。

下载页面：

wxml

容器包含图像。

文轩

图像{ width: 100%;高度： 100%; }

直接看效果：

下载

js

//点击图片tapImage(e) { const url=this.data.url.replace('http', 'https') wx.showActionSheet({ itemList: ['下载'], success: res={ if (res. tapIndex===0) this.download(url) } })},//下载图片download(url) { wx.showLoading({ title: '正在下载.', }) wx.downloadFile({ url, success: function (res ) { wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: function(res) { wx.hideLoading() wx.showToast({ title: '保存成功', }) }, failure: function(res) { wx.hideLoading( ) wx .showToast({ title: '失败', icon: '无' }) } }) }, failed: function() { wx.hideLoading() wx.showToast({ title: '失败', icon: '无' }) } } ) } ,

点击的时候，它匹配并替换了http为https。这是由于我的图像源有问题造成的，因此无需赘述。

然后显示一个操作并选择下载.

下载基本上是：先通过API下载文件（图片）——获取临时路径——保存到相册。

整个下载页面非常简单，只要知道怎么下载就可以了。

上传

上传页面对我来说更困难。非专业的后端可能对表的分类和优化没有那么深入，目前还比较粗糙。

wxml

选择上传

注意输入的值绑定。强烈建议对所有输入使用值绑定。不然当你想修改输入值的时候，你会感觉要死。

这里解释一下，这个小程序上传的数据库是根据上传的角色名（或者可区分的名字）来建各个表的，所以需要用户自己定义表名。如果重复的话如何覆盖？如果没有，请创建一个新的。

文轩

.preview { width: 100%; height: 50%;}.文件名{ height: 80rpx;边界半径： 10rpx； border: 2rpx 实心#d8d8d8；填充左： 40rpx；背景： #f2f2f2; color: #666 ;}.buttons { display: flex ; justify-content: 之间的空格；边距top: 8rpx;}.ctrl { flex: 1;宽度： 50%；填充： 0；颜色： #333;字体大小： 32rpx;}

风格就不多说了，就这样：

上传

js

/** * 页面初始数据*/data: { PreviewUri: '', //成功上传预览图片地址inputValue: '', //输入框内容}, /** * 生命周期函数--监控页面加载*/onLoad: function(options) { this.chooseImg()},chooseImg() { wx.chooseImage({ count: 1, //一次只能传输一个文件，且文件名必须设置sizeType: ['original', '压缩'], sourceType: ['专辑'], success: res={ this.setData({ PreviewUri: res.tempFilePaths[0] }) } })},upload(roleName) { wx.showLoading({ title: '正在上传. ', }) //随机生成一个文件名const fileName=roleName + ~~(Math.random() * 10000000) new AV.File(fileName, { blob: { uri: this.data.previewUri }, }) .save( ) .then(file={ //创建对象const FileName=AV.Object.extend(roleName) const obj=new FileName() obj.set('title', fileName) obj.set('url', file.url ()) obj.set('下载', 0) obj.save().then(todo={ wx.hideLoading() wx.showToast({ title: '上传成功', }) }, error={ wx.hideLoading () console.log (error) } ) }) .catch(err={ wx.hideLoading() console.log(err) })},//检查输入内容是英文还是数字checkInput(e) { const值=e.detail. value this.setData({ inputValue: value }) //如果输入不是数字且以字母或数字开头，则会被清除if (value.match(/W/) || value.match(/^d /)) { wx.showToast({ title: '请输入字母或以字母开头的数字', icon: 'none', }) this.setData({ inputValue: '' }) return } else { //设置第一个字母要大写this.setData({ inputValue: value.replace(//(^w)/, function($1) { return $1.toUpperCase() }) }) }},confirm(e) { const roleName=this.data .inputValue if (!roleName) { wx.showToast({ title: ' 请输入角色英文名称，不带后缀', icon: 'none', }) return } this.upload(roleName)}

js主要是调用api获取相册图片的临时缓存地址，生成100万以内的随机文件名，最后将文件表名与有规律的模式匹配看是否合理，替换为大写字母初始模式。