脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → uni-file-picker文件上传

uni-file-picker文件选择上传功能实现

 更新时间：2023年07月08日 10:23:52   作者：四季奶青全糖去冰@  
这篇文章主要介绍了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()。

<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
          }
        });
      }, 
    }  
  }

图片展示

案例二（上传多张图片）

<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文件选择上传的文章就介绍到这了,更多相关uni-file-picker文件上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论