美文网首页
uniapp中使用插件进行上传附件(word,表格,图片等)

uniapp中使用插件进行上传附件(word,表格,图片等)

作者: Amanda妍 | 来源:发表于2022-05-23 11:24 被阅读0次
审核不通过-显示不通过原因 2.png

上传文章封面我是使用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)

image.png
上传附件js:
image.png
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)
      },

相关文章

网友评论

      本文标题:uniapp中使用插件进行上传附件(word,表格,图片等)

      本文链接:https://www.haomeiwen.com/subject/ludrprtx.html