精华内容
下载资源
问答
  • vant图片上传的功能带预览

    千次阅读 2020-06-05 16:12:24
    https://youzan.github.io/vant/#/zh-CN/uploader vue组件 <template> <div class="my"> <h1>This is an my page</h1> <van-uploader v-model="fileList" multiple /> </div&...

    文档

    https://youzan.github.io/vant/#/zh-CN/uploader

    vue组件

    <template>
      <div class="my">
        <h1>This is an my page</h1>
        <van-uploader v-model="fileList" multiple />
    
      </div>
    </template>
    
    <script>
    import Vue from 'vue';
    import { Uploader } from 'vant';
    
    export default {
      data() {
        return {
          fileList: [
            { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
            // Uploader 根据文件后缀来判断是否为图片文件
            // 如果图片 URL 中不包含类型信息,可以添加 isImage 标记来声明
            { url: 'https://cloud-image', isImage: true },
          ],
        };
      },
    };
    
    Vue.use(Uploader);
    </script>
    
    

    展开全文
  • vue +vant + crodova实现图片上传、图片预览、图片删除 函数调用方法使用图片预览有坑,图片不显示 <template> <div class="add-check-page"> <head-com :title="title"></head-com> &...

    vue +vant + crodova实现图片上传、图片预览、图片删除

    函数调用方法使用图片预览有坑,图片不显示
    在这里插入图片描述

    <template>
      <div class="add-check-page">
        <head-com :title="title"></head-com>
        <van-form @submit="onSubmit">
          <h2 class="van-doc-demo-block__title">添加照片</h2>
          <van-field name="uploader" class="pic-uploader">
            <template #input>
              <template v-for="(item, index) in file_path">
                <div class="item" :key="index">
                  <van-image fit="cover" :src="IP + item" @click="preView(index)">
                    <template v-slot:loading>
                      <van-loading type="spinner" size="20" />
                    </template>
                  </van-image>
                  <van-icon name="close" @click="delPic(index)" />
                </div>
              </template>
              <van-icon class="up-btn" @click="picture" :name="require('#/images/add_check_icon.png')" />
              <van-uploader id="photo" multiple :after-read="afterRead" style="display:none">
                <van-button
                  class="up-btn"
                  :icon="require('#/images/add_check_icon.png')"
                  type="default"
                />
              </van-uploader>
            </template>
          </van-field>
          <van-button class="save" block type="default" native-type="submit">确认提交</van-button>
        </van-form>
        <van-action-sheet
          v-model="show"
          :actions="actions"
          @select="onSelect"
          cancel-text="取消"
          close-on-click-action
        />
        <loading :showLoading="showLoad"></loading>
        // 使用函数调用图片预览方法,图片无法显示所以改用组件调用
        <van-image-preview
          v-if="imgShow"
          v-model="imgShow"
          :images="preList"
          :start-position="startIndex"
          @closed="handleClose"
        ></van-image-preview>
      </div>
    </template>
    <script>
    import headCom from '_c/header/index.vue'
    import loading from '_c/loading/index.vue'
    export default {
      components: {
        headCom,
        loading
      },
      data() {
        return {
          //   公司id
          id: '',
          id2: '',
          title: '',
          file_name: [],
          file_path: [],
          content: '',
          show: false,
          actions: [{ name: '拍摄' }, { name: '从手机相册选择' }],
          showLoad: false,
          imgPre: '',
          imgShow: false,
          preList: [],
          startIndex: 0
        }
      },
      beforeRouteLeave(to, from, next) {
        if (this.imgPre) {
          this.imgPre.close()
        }
        next()
      },
      created() {
        this.id = this.$route.params.id
        if (this.$route.name === 'editCheck') {
          this.title = '编辑记录'
          this.getInfo()
        } else {
          this.title = '添加记录'
        }
      },
      methods: {
        async getInfo() {
          this.showLoad = true
          try {
            let data = {
              id: this.id
            }
            let res = await this.$api.check.edit(data)
            this.content = res.detail.content
            this.id2 = res.detail.company_id
            res.photo_list.forEach((item) => {
              this.file_name.push(item.file_name)
              this.file_path.push(item.file_path)
            })
            this.showLoad = false
          } catch (error) {
            this.showLoad = false
            this.$toast(error.msg)
          }
        },
        async onSubmit(values) {
          this.showLoad = true
          try {
            let data = {}
            if (this.$route.name === 'editCheck') {
              data = {
                id: this.id,
                company_id: this.id2,
                content: values.content,
                file_names: [...this.file_name],
                file_paths: [...this.file_path]
              }
              await this.$api.check.editPost(data)
            } else {
              // 添加
              data = {
                company_id: this.id,
                content: values.content,
                file_names: [...this.file_name],
                file_paths: [...this.file_path]
              }
              await this.$api.check.addPost(data)
            }
            this.showLoad = false
            this.$router.go(-1)
          } catch (error) {
            this.$toast(error.msg)
          }
        },
        // 删除图片
        delPic(index) {
          this.file_path.splice(index, 1)
          this.file_name.splice(index, 1)
        },
        // 图片预览
        preView(index) {
          this.startIndex = index
          this.preList = []
          this.file_path.forEach((item) => {
            this.preList.push(this.IP + item)
          })
          this.imgShow = true
        },
        // 关闭预览
        handleClose() {
          this.preList = []
          this.imgShow = false
        },
        async afterRead(file) {
          this.showLoad = true
          try {
            if (file.length) {
              file.forEach(async (item) => {
                let res = await this.$api.base.upload(item)
                this.file_name.push(res.name)
                this.file_path.push(res.url)
                this.showLoad = false
              })
            } else {
              let res = await this.$api.base.upload(file)
              this.file_name.push(res.name)
              this.file_path.push(res.url)
              this.showLoad = false
            }
          } catch (e) {
            this.showLoad = false
            this.$toast(e.data)
          }
        },
        picture() {
          this.show = true
        },
        // 选择添加图片方式
        onSelect(item) {
          this.show = false
          if (item.name === '拍摄') {
            this.takePhoto()
          } else {
            let dl = document.getElementById('photo')
            dl.click()
          }
        },
        // 拍照上传
        takePhoto() {
          let that = this
          // crodova 调取相机拍照
          navigator.camera.getPicture(success, error, {})
          function success(imageURI) {
            that.showLoad = true
            // file uri 上传服务器
            that.fileUpload(imageURI)
          }
          function error() {
            this.$toast('打开相机失败')
          }
        },
        // 使用cordova FileUpload上传图片
        fileUpload: function(imageURI) {
          let that = this
          let FileUploadOptions = window.FileUploadOptions
          let FileTransfer = window.FileTransfer
          let options = new FileUploadOptions()
          options.fileKey = 'file'
          options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1)
          options.mimeType = 'image/jpeg'
          let ft = new FileTransfer()
          ft.upload(imageURI, encodeURI(this.API + '/user/uploadImg'), function(data) {
            let resString = data.response
            let resObject = JSON.parse(resString) // 字符串转对象
            if (resObject.code === 1) {
              that.file_name.push(resObject.data.name)
              that.file_path.push(resObject.data.url)
              that.showLoad = false
            } else {
              that.showLoad = false
              that.$toast(resObject.msg)
            }
          })
        }
      }
    }
    </script>
    
    展开全文
  • //判断图片是否大于500K,是就直接上传,反之压缩图片 if (this.result.length * 1024) { file.cusContent = result; self.isloadImg = false; } else { img.onload = function() { let data = self....

    template部分

    <div>
    	<van-uploader
    	   :capture="'camera'"
    	   v-model="fileList"
    	   :before-delete="afterDelete"
    	   :before-read="beforeRead"
    	   :after-read="afterRead"
    	 />
    	 <div class="shibie">
    	   <van-button :disabled="isloadImg" type="info" @click="submitImg" block>识别</van-button>
    	 </div>
    </div>
    

    js部分

    data() {
    	return {
    		fileList:[]
    	};
    },
    methods:{
    	// 上传之前
    	async beforeRead(file) {
    	    console.log(file, "beforeRead");
    	    return new Promise((resolve, reject) => {
    	        this.isloadImg = true;
    	        let ishas = this.fileList.some(function(cur, i, arr) {
    	            return cur.file.name === file.name;
    	        });
    	        if (ishas) {
    	            this.$alert("图片已存在");
    	            this.isloadImg = false;
    	            return;
    	        }
    	        if (file.type.indexOf("image/") === -1) {
    	            this.$alert("请上传 jpg 格式图片");
    	            reject();
    	        } else {
    	            this.imgPreview(file);
    	            resolve();
    	        }
    	    });
    	},
    	//删除之后的回调
    	async afterDelete(file) {
    	    this.isloadImg = true;
    	    return new Promise((resolve, reject) => {
    	        console.log("删除文件的回调,afterDelete");
    	        this.isloadImg = false;
    	        resolve();
    	    });
    	},
    	afterRead(file) {
    	    //上传完成
    	    console.log(file, "afterRead");
    	},
    	imgPreview(file) {
    	    let self = this;
    	    // 看支持不支持FileReader
    	    if (!file || !window.FileReader) return;
    	    let reader = new FileReader();
    	    // 将图片2将转成 base64 格式
    	    reader.readAsDataURL(file);
    	    // 读取成功后的回调
    	    reader.onloadend = function() {
    	        //此处的this是reader
    	        let result = this.result;
    	        let img = new Image();
    	        // console.log(result,'2222222222222')
    	        img.src = result;
    	        //判断图片是否大于500K,是就直接上传,反之压缩图片
    	        if (this.result.length <= 500 * 1024) {
    	            file.cusContent = result;
    	            self.isloadImg = false;
    	        } else {
    	            img.onload = function() {
    	                let data = self.compress(img);
    	                file.cusContent = data;
    	                self.isloadImg = false;
    	            };
    	        }
    	    };
    	},
    	// 压缩图片
    	compress(img) {
    	    let canvas = document.createElement("canvas");
    	    let ctx = canvas.getContext("2d");
    	    //瓦片canvas
    	    let tCanvas = document.createElement("canvas");
    	    let tctx = tCanvas.getContext("2d");
    	    let width = img.width;
    	    let height = img.height;
    	    //如果图片大于四百万像素,计算压缩比并将大小压至400万以下
    	    let ratio;
    	    if ((ratio = (width * height) / 4000000) > 1) {
    	        ratio = Math.sqrt(ratio);
    	        width /= ratio;
    	        height /= ratio;
    	    } else {
    	        ratio = 1;
    	    }
    	    canvas.width = width;
    	    canvas.height = height;
    	    //铺底色
    	    ctx.fillStyle = "#fff";
    	    ctx.fillRect(0, 0, canvas.width, canvas.height);
    	    //如果图片像素大于100万则使用瓦片绘制
    	    let count;
    	    if ((count = (width * height) / 1000000) > 1) {
    	        // console.log("超过100W像素"); ~~ 是利于符号转换成数字类型
    	        count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
    	        //      计算每块瓦片的宽和高
    	        let nw = ~~(width / count);
    	        let nh = ~~(height / count);
    	        tCanvas.width = nw;
    	        tCanvas.height = nh;
    	        for (let i = 0; i < count; i++) {
    	            for (let j = 0; j < count; j++) {
    	                tctx.drawImage(
    	                    img,
    	                    i * nw * ratio,
    	                    j * nh * ratio,
    	                    nw * ratio,
    	                    nh * ratio,
    	                    0,
    	                    0,
    	                    nw,
    	                    nh
    	                );
    	                ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
    	            }
    	        }
    	    } else {
    	        ctx.drawImage(img, 0, 0, width, height);
    	    }
    	    //进行最小压缩
    	    let ndata = canvas.toDataURL("image/jpeg", 0.3);
    	    tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
    	    // console.log(ndata,'压缩后的base64');
    	    return ndata;
    	}
    }
    

    因为引入Exif失败,不能实现照片的旋转,完整代码参考连接:https://www.jb51.net/article/162760.htm

    展开全文
  • Vant 图片上传 1、安装Vant ui npm i vant -S 2、在 main.js 中引入 Vant ui // 引入vant import Vant from 'vant' import 'vant/lib/index.css' Vue.use(Vant) 3、具体使用Vant Uploader组件详解 <...

    Vue+Vant ui实现图片上传

    Vant 图片上传

    • 1、安装Vant ui
      npm i vant -S
    • 2、在 main.js 中引入 Vant ui
    	// 引入vant
    	import Vant from 'vant'
    	import 'vant/lib/index.css'
    	
    	Vue.use(Vant)
    
    • 3、具体使用Vant Uploader组件详解
    <div class="d_photo">
    	<p>图片上传</p>
    	<van-uploader v-model="fileList" :after-read="afterRead" multiple />
    </div>
    
    export default {
      data() {
        return {
        	fileList: []
        	}
        },
     methods:{
     	afterRead(file) {
          //文件读取完成后的回调函数
          let content = file;
          let formData = new FormData();
          if(Array.isArray(content)) {
            console.log('file',file)
            content.forEach(item => {
              formData.append("file",item.file);
            });
          }else{
            formData.append("file", content.file);
          }
            console.log(content)
          //获取formdata表单所有的数据
          console.log("formData对象",formData)
          console.log('file',formData.getAll("file"));
          this.$api.file.uploadimg({
            url: 'upload',
            files: formData,
          }).then(res => {
            console.log(res);
            console.log("返回地址",res.file);
            // this.fileList = res.file;
          });
        },
     }
    }
    
    展开全文
  • .wxml <van-uploaderfile-list="{{fileList}}"bind:after-read="afterRead"bind:delete="delete"multiple="{{true}}"/> .json "usingComponents":{ ..."van-uploader":"@vant/weapp/uploader/index" } .js
  • 上传头像,使用了有栈vant的uploader打开相册,也使用了vueCropper组件截取图片等!首先安装:npm install --s vue-cropper效果图:代码如下::after-read="afterRead":preview-image="false":max-count="1":show-...
  • 添加了图片上传之后预览功能(真机调试也可以) 预览功能可以删除并重新选择图片 先新建一个小程序项目(我先没使用云开发,直接建的js项目) 小程序app.js进行配置 App({ onLaunch() { wx.cloud.init({ env: ...
  • 根据项目需求,一个页面,同时出现以下几种组件1、input输入框2、picker选择器3、时间选择器4、textarea5、图片上传预览首先看vant-ui发现以上几个组件都可以使用,于是愉快的撸了起来。。。。引入了所有需要用的...
  • <van-uploader v-model="uploadList" :after-read="process"/>...取上传列表中图片的数据 base64数据 //取上传列表中图片的数据 base64数据 uploadList[0].content.replace(/^data:image\/\w+;base64,/, '');
  • 因为项目是vue+vant,这里图片预览直接使用vant的组件,不做多余的封装 html 结构 主要选择图片按钮,图片预览区, 选择图片的input <div class="img-upload"> <ul class="preview-list" > <li ...
  • 在上传框中有一个事件: onchange 事件可以得到图片的变化 使用 vant 中的组件:ImagePreview 为了能够让图片正常显示在组件中:应该将图片对象转为一个图片地址 方法一: URL.createObjectURL 这种方式兼容性会差...
  • vue页面中用v-html渲染出的图片如何实现图片预览 最近项目提出了个新需求,公告...之前实现的图片预览我是通过vant图片预览组件(ImagePreview)实现的,接口拿到图片列表,直接应用就好了 <div class="img_wrapper...
  • 以下为wxml (使用的vant小程序ui框架,需在json文件里自行引入) &lt;view class='clearFloat'&gt; &lt;view class='upload_title'&gt;头像展示(必填) &lt;span class="basic_title_...
  • vue实现添加9张图片预览删除

    千次阅读 2018-10-08 15:40:49
    1、这里上传图片使用了vant 的 Uploader 图片上传,使用很简单。 2、预览删除是使用一个弹窗的子组件实现的,比较简单,页面就不记录了。弹窗点击删除之后,直接emit信息给父组件。 三、代码部分 1.HTML &lt;...
  • 上文说到了vue引用了vant插件,是一个很好用的移动端开发组件,它自带了上传文件的方法,当然也带了图片预览的方法 图片预览其实跟文件下载有点类似,上文我们说到文件下载请求后台接口,拿到了文件的’blob’,然后...
  • 以下为wxml (运用的vant小顺序ui框架,需在json文件里自行引入)头像展现(必填)(选一张悦目的个人照片能够增添客户点击的时机哦){{item}}以下为wxss.clearFloat {clear: both;overflow: hidden;}.upload_title {color...

空空如也

空空如也

1 2
收藏数 39
精华内容 15
关键字:

vant图片上传预览