上传文章封面我是使用uniapp自带的api(uni.chooseImage)count 数量根据自己的需求来
<view class="article-photo">
<view class="label-box">
<text class="require">*</text>
<view class="label">上传文章封面</view>
</view>
<view class="img-upload-item" @click="upload('photo')">
<view class="img-no-upload" v-if="model.photo==''">
<view class="upload-icon">+</view>
</view>
<view class="have-upload" v-else>
<img class="upload-book-img" :src="model.photo" alt=""/>
</view>
</view>
</view>
</view>
<view class="upload-picture-tips">建议尺寸147*100,图片不超过50M。</view>
<view class="upload-article">
<view class="label-box">
<text class="require">*</text>
<view class="label">文档链接</view>
</view>
<img class="upload-file-icon" src="../../../static/images/path.png" @click="chooseFile">
</view>
上传文章封面js
upload(name) {
uni.chooseImage({
success: res => {
uni.showLoading({title: '正在上传', mask: true})
uni.uploadFile({
url: '/api/upload/file?path=img/doctor',
filePath: res.tempFilePaths[0],
name: 'file',
success: uploadRes => {
uni.hideLoading()
this.$set(this.model, name, JSON.parse(uploadRes.data).data.url)
}
})
},
fail: () => {
console.log('选择图片失败')
},
complete: res => {
}
})
},
上传附件的话官网没有自带的api,那么就需要使用插件:(插件链接:https://ext.dcloud.net.cn/plugin?id=4109)
上传附件js:
chooseFile() {
this.$refs.lFile.upload({
// #ifdef APP-PLUS
currentWebview: this.$mp.page.$getAppWebview(),
// #endif
url: '/api/upload/file?path=file/article/apply', //你的上传附件接口地址
name: 'file'
})
},
//上传成功
upSuccess(res) {
let url = res.data.data.url
this.$set(this.model, 'url', url)
},