uni-file-picker文件选择上传

这篇具有很好参考价值的文章主要介绍了uni-file-picker文件选择上传。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

基础用法

mode="grid" ,可以使用九宫格样式选择图片

limit="1" ,则最多选择张图片

file-mediatype="image",限定只选择图片

file-extname='png,jpg',限定只选择 png和jpg后缀的图片

auto-upload="false",可以停止自动上传,通过ref调用upload方法自行选择上传时机。与ref="files"搭配使用,this.$refs.files.upload()。文章来源地址https://www.toymoban.com/news/detail-508221.html

<uni-file-picker 
    v-model="imageValue"  
    file-mediatype="image"
    mode="grid"
    file-extname="png,jpg"
    :limit="1"
    @progress="progress" 
    @success="success" 
    @fail="fail" 
    @select="select"
/>

<script>
    export default {
        data() {
            return {
                imageValue:[]
            }
        },
        methods:{
            // 获取上传状态
            select(e){
                console.log('选择文件:',e)
            },
            // 获取上传进度
            progress(e){
                console.log('上传进度:',e)
            },
            
            // 上传成功
            success(e){
                console.log('上传成功')
            },
            
            // 上传失败
            fail(e){
                console.log('上传失败:',e)
            }
        }
    }
</script>

案例一(只上传一张图片)

<template>
  <view class="container example">
    <uni-forms ref="baseForm" :modelValue="baseFormData" label-position="top">
      <uni-forms-item label="图片上传">
       <uni-file-picker 
        v-model="imageValue" 
        fileMediatype="image" 
        mode="grid" 
        @select="select"   
        limit="1"
        ></uni-file-picker>
      </uni-forms-item>
    </uni-forms>
  </view>
</template>

export default {
    data() {
      return {
        //图片
        imageValue:[],
      }
    },
    methods:{
      //图片上传
      select(e){
        const tempFilePaths = e.tempFilePaths;
        //获取图片临时路径
        const imgUrl=tempFilePaths[0]
        uni.uploadFile({
          //图片上传地址
          url: 'https://xxx.xxx.com/api/uploadpic/', 
          filePath: imgUrl,
          //上传名字,注意与后台接收的参数名一致
          name: 'imgUrl',
          //设置请求头
          header:{"Content-Type": "multipart/form-data"},
          //请求成功,后台返回自己服务器上的图片地址
          success: (uploadFileRes) => {
            console.log('uploadFileRes',JSON.parse(uploadFileRes.data));   
            //处理数据
            const path=JSON.parse(uploadFileRes.data)
            //赋值,前端渲染
            this.baseFormData.photo=path.imgUrl
          }
        });
      }, 
    }  
  }
图片展示
uni-file-picker文件选择上传

案例二(上传多张图片)

<template>
  <view class="container example">
    <uni-forms ref="baseForm" :modelValue="baseFormData" :rules="rules" label-position="top">
      <uni-forms-item label="图片上传">
        <uni-file-picker
         v-model="imageValue"
         fileMediatype="image" 
         mode="grid" 
         @select="select"   
         @delete="delIMG"
         limit="9"></uni-file-picker>
      </uni-forms-item>
    </uni-forms>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        imgURL:'',
        //图片
        imageValue:[],
      };
    },
    methods:{
      //图片上传
      select(e){
        const tempFilePaths = e.tempFilePaths;
        const imgUrl=tempFilePaths[0]
        uni.uploadFile({
          url: 'https://xxx.xxx.com/api/uploadpic2/', 
          filePath: imgUrl,
          name: 'imgUrl',
          header:{"Content-Type": "multipart/form-data"},
          success: (uploadFileRes) => {
            console.log('uploadFileRes',JSON.parse(uploadFileRes.data));
            let path=JSON.parse(uploadFileRes.data)
            //后端返回的地址,存入图片地址
            this.imageValue.push({
              url:this.imgURL+path.imgUrl,
              name:''
            })
            console.log('imageValue',this.imageValue)
          }
        });
      },
      //图片删除
      delIMG(e){
        console.log('456',e)
        const num = this.imageValue.findIndex(v => v.url === e.tempFilePath);
        this.imageValue.splice(num, 1);
      }
    },
    onLoad() { 
      //全局定义的图片访问地址前缀
      this.imgURL=this.$imgURL
    }
  }
</script>

到了这里,关于uni-file-picker文件选择上传的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包