精华内容
下载资源
问答
  • 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>
    
    

    展开全文
  • <div class="upload-img">...请上传头像</div> <van-uploader :after-read="afterRead"> <img :src="canvasImg" ref="uploadImg" alt="" v-if="canvasImg" width="80" height="80"> .

    html: 

    页面需要引入

      <script src="https://unpkg.com/vue/dist/vue.js"></script>

      <script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>

        <div class="upload-img">
          <div class="upload-img-text">请上传头像</div>
          <van-uploader :after-read="afterRead">
            <img :src="canvasImg" ref="uploadImg" alt="" v-if="canvasImg" width="80" height="80">
          </van-uploader>
        </div>

    js: 

    //canvasImg: "", //return中声明
    
    methods:{
          afterRead(file) {
              this.canvasImg = file.content;
              // 此时可以自行将文件上传至服务器
              console.log(file);
            },
    }

    上传之前:

    上传之后(点击图片可重新上传):

    展开全文
  • 主要介绍了vue+vant使用图片预览功能ImagePreview的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 本文实例为大家分享了vue实现图片上传预览的具体代码,供大家参考,具体内容如下 效果图 html结构 <!--点击上传按钮--> !(!item.isNew&&editBtnType[index]) click=houseUpload(index)> ...
  • weui框架暂时只有css文件,并没有js文件实现其功能,我在其html+css后面增加了js实现其功能,为大家提供方便,也为自己保存记录。具体实例代码大家参考下本
  • 主要介绍了vue vantUI实现文件(图片、文档、视频、音频)上传(多文件),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 在社区功能中,想要发布一个帖子,那么最好在本地预览得到图片数量然后通过循环一次上传,而不是直接上传.这里对组件进行了一些修改. html: <van-uploader :disabled="disable" :file-list="previewList" @after-...

    在社区功能中,想要发布一个帖子,那么最好在本地预览得到图片数量然后通过循环一次上传,而不是直接上传.这里对组件进行了一些修改.
    html:

    <van-uploader 
    :disabled="disable" 
    :file-list="previewList" 
    @after-read="previewImg" 
    max-count="9" />
    

    js:

    	data() {
    			return {
    			
    				text: "",
    				school: "",
    				disable: true,
    				postId: "",
    				fileList: [],
    				previewList: [],
    				imgId: 0,
    				file: null
    			}
    		},
    		methods:{	
    		previewImg(e) {
    				const {
    					previewFile
    				} = e.detail
    				this.previewList.push({
    					...previewFile,
    					url: e.detail.file.url
    				})
    			},
    				submit() {
    				wx.showLoading({
    					title: "开始上传..."
    				})
    				let self = this
    				uni.request({
    					url: getApp().globalData.baseURL + "/post/addAPost",
    					data: {
    						"openid": wx.getStorageSync('openid'),
    						"school": self.school,
    						"content": self.text
    					},
    					header: {
    						"token": wx.getStorageSync('token')
    					},
    					success: (res) => {
    						let self = this
    						self.postId = res.data.data
    						let length = self.previewList.length
    						if (length !== 0) {
    							for (let i = 0; i < length; i++) {
    								wx.uploadFile({
    									url: getApp().globalData.baseURL + "/post/addAPostImage",
    									filePath: self.previewList[i].url,
    									name: "file",
    									formData: {
    										"file": self.previewList[i],
    										"imageId": i,
    										"postId": self.postId
    									},
    									header: {
    										"token": wx.getStorageSync('token')
    									},
    									success: (res) => {
    										self.fileList.push({
    											...self.previewList[i],
    											url: res.data
    										});
    										if (self.previewList.length === self.fileList.length) {
    											wx.hideLoading()
    											uni.navigateBack()
    										}
    									},
    									fail: (err) => {
    										console.log(err)
    										wx.hideLoading()
    										Notify({
    											type: 'danger',
    											message: '发布失败,请检查您的网络'
    										});
    									}
    								})
    							}
    						} else {
    							wx.hideLoading()
    						}
    						uni.navigateBack()
    					},
    					fail: (err) => {
    						Notify({
    							type: 'danger',
    							message: '失败,请检查您的网络'
    						});
    					}
    				})
    			},
    			}
    

    全部代码:

    <template>
    	<view>
    		<van-cell-group title="发帖子">
    			<van-field custom-style="height:500rpx" auto-focus :value="text" @change="getInput" type="textarea"
    				placeholder="说点什么..." autosize auto-focus />
    		</van-cell-group>
    		<van-cell-group title="上传照片" :border="false">
    			<van-row>
    				<van-uploader :disabled="disable" :file-list="previewList" @after-read="previewImg" max-count="9" />
    			</van-row>
    		</van-cell-group>
    		<van-row>
    			<view class="submitBtn">
    				<van-button :disabled="disable" type="primary" color="#006600" @click="submit" block>
    					发布
    				</van-button>
    			</view>
    		</van-row>
    		<van-notify id="van-notify" />
    		<van-dialog id="van-dialog" confirm-button-color="#006600" @tap="getUserInfoByOpenid(e)" />
    	</view>
    </template>
    <script>
    	import Notify from '../../wxcomponents/vant/dist/notify/notify';
    	import Dialog from '../../wxcomponents/vant/dist/dialog/dialog';
    	export default {
    		data() {
    			return {
    				text: "",
    				school: "",
    				disable: true,
    				postId: "",
    				fileList: [],
    				previewList: [],
    				imgId: 0,
    				file: null
    			}
    		},
    		onLoad() {
    			this.getUserInfo()
    		},
    		onShow() {
    			this.getUserInfo()
    		},
    		methods: {
    			addAUserInfo(res) {
    				uni.request({
    					url: getApp().globalData.baseURL + "/userInf/addAUserInf",
    					data: {
    						"openid": wx.getStorageSync('openid'),
    						"nickname": res.userInfo.nickName,
    						"headImg": res.userInfo.avatarUrl
    					},
    					header: {
    						"token": wx.getStorageSync('token')
    					},
    					success: (res) => {
    						console.log(res)
    					},
    					fail: (err) => {
    						Notify({
    							type: 'danger',
    							message: '添加用户信息失败'
    						});
    					}
    				})
    			},
    			getUserInfoByOpenid(e) {
    				let self = this
    				// 查询用户信息
    				uni.request({
    					url: getApp().globalData.baseURL + "/userInf/getUserInfByOpenid",
    					data: {
    						"openid": wx.getStorageSync('openid')
    					},
    					header: {
    						"token": wx.getStorageSync('token')
    					},
    					success: (res) => {
    						if (res.data.data === null) {
    							wx.getUserProfile({
    								desc: "用于完善用户资料",
    								success: (res) => {
    									self.addAUserInfo(res)
    								},
    								fail: (err) => {
    									Notify({
    										type: 'danger',
    										message: '查询用户信息失败'
    									});
    								}
    							})
    						}
    					},
    					fail: (err) => {
    						console.log(err)
    					}
    				})
    			},
    			getInput(e) {
    				this.text = e.detail
    				this.checkNull()
    			},
    			previewImg(e) {
    				const {
    					previewFile
    				} = e.detail
    				this.previewList.push({
    					...previewFile,
    					url: e.detail.file.url
    				})
    			},
    			submit() {
    				wx.showLoading({
    					title: "开始上传..."
    				})
    				let self = this
    				uni.request({
    					url: getApp().globalData.baseURL + "/post/addAPost",
    					data: {
    						"openid": wx.getStorageSync('openid'),
    						"school": self.school,
    						"content": self.text
    					},
    					header: {
    						"token": wx.getStorageSync('token')
    					},
    					success: (res) => {
    						let self = this
    						self.postId = res.data.data
    						let length = self.previewList.length
    						if (length !== 0) {
    							for (let i = 0; i < length; i++) {
    								wx.uploadFile({
    									url: getApp().globalData.baseURL + "/post/addAPostImage",
    									filePath: self.previewList[i].url,
    									name: "file",
    									formData: {
    										"file": self.previewList[i],
    										"imageId": i,
    										"postId": self.postId
    									},
    									header: {
    										"token": wx.getStorageSync('token')
    									},
    									success: (res) => {
    										self.fileList.push({
    											...self.previewList[i],
    											url: res.data
    										});
    										if (self.previewList.length === self.fileList.length) {
    											wx.hideLoading()
    											uni.navigateBack()
    										}
    									},
    									fail: (err) => {
    										console.log(err)
    										wx.hideLoading()
    										Notify({
    											type: 'danger',
    											message: '发布失败,请检查您的网络'
    										});
    									}
    								})
    							}
    						} else {
    							wx.hideLoading()
    						}
    						uni.navigateBack()
    					},
    					fail: (err) => {
    						Notify({
    							type: 'danger',
    							message: '失败,请检查您的网络'
    						});
    					}
    				})
    			},
    			checkNull() {
    				if (this.school !== "" && this.text !== "") {
    					this.disable = false
    				} else {
    					if (this.school === "") {
    						Notify({
    							type: 'danger',
    							message: '请登录'
    						});
    					}
    					this.disable = true
    				}
    			},
    			getUserInfo() {
    				let self = this
    				uni.request({
    					url: getApp().globalData.baseURL + "/user/getUser",
    					data: {
    						"openid": wx.getStorageSync('openid')
    					},
    					header: {
    						"token": wx.getStorageSync('token')
    					},
    					success: (res) => {
    						console.log(res)
    						if (res.data.code === 1) {
    							if (res.data.data.headImg !== null) {
    								self.school = res.data.data.school
    							} else {
    								// 未完善个人信息,需要拿到学校,昵称
    								Dialog.alert({
    									message: '您还未完善个人信息,只有完善信息后才能发帖哦',
    									confirmButtonText: '去完善'
    								}).then(() => {
    									uni.navigateTo({
    										url: "../myInfo/myInfo"
    									})
    								});
    							}
    
    						} else {
    							Notify({
    								type: 'danger',
    								message: '请重试'
    							});
    						}
    
    					},
    					fail: (err) => {
    						Notify({
    							type: 'danger',
    							message: '获取个人信息失败,请检查您的网络连接'
    						});
    					}
    				})
    			}
    		}
    	}
    </script>
    
    <style scoped>
    	.submitBtn {
    		margin: 30% auto;
    		border-radius: 10rpx;
    		margin-left: 20rpx;
    		margin-right: 20rpx;
    		text-align: center;
    	}
    </style>
    
    
    展开全文
  • HTML5 图片上传预览功能 (pc,手机都能适配) 支持预览 适配各种机型 HTML5 图片上传预览功能 (pc,手机都能适配) 支持预览 适配各种机型
  • 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>
    
    展开全文
  • VUE+Vant 实现图片预览

    2021-02-22 10:25:41
    因项目需要,去掉了vant中uploader的删除键,仅提供图片预览 实现方法: vant针对图片上传部分,在本地预览上并未多加笔墨,项目需要上传后预览图片,为了缓解服务器压力,采用获取【本地url】的方式进行预览。...
  • 其实是封装input,通过accept设置可以接收的文件类型为image类型的,来实现图片上传 解析后html如下: 组件默认accept为image/*; 修改accpect的值为具体文件格式,即可解决问题 如下: <va
  • 需要上传图片预览.但是第二次上传图片显示的时候发现之前的图片没有改变.,地址中的图片已经变了,后经过分析发现是地址相同第二次改变img src属性的时候图片未发生改变,浏览器第二次不会去请求服务器 解决方法:在...
  • import { ImagePreview } from 'vant'; ImagePreview(['https://img01.yzcdn.cn/vant/apple-1.jpg']); 这么写会报错,那么怎么解决这个问题呢,其实很简单 因为不是脚手架安装的vantUI,用法有些不同,有些组件...
  • } } 划重点(⊙_⊙)—耗费了我几个小时才搞出来的点击整个区域就可以上传的代码, (*๓´╰╯`๓) 自定义文件上传 点击整个红色区域触发启动本地文件夹 选中图片之后,依然在对应区域预览 HTML代码 使用vant , (`・...
  • 现在有一个需求,需要实现图片上传、展示、删除的功能,看看操作代码
  • vue上传图片图片预览显示的方法

    千次阅读 2018-10-17 09:53:55
    在vue项目中,经常有图片上传的功能,类似微博的发表动态,都需要插入图片,其实我们需要做的就是两步: 1.获得本地图片,显示在页面; 2.上传图片到服务器 &lt;div&gt; &lt;div class="fl width-...
  • //判断图片是否大于500K,是就直接上传,反之压缩图片 if (this.result.length * 1024) { file.cusContent = result; self.isloadImg = false; } else { img.onload = function() { let data = self....
  • vant上传图片

    千次阅读 2020-06-15 16:18:12
    直接上代码了 <van-uploader :file-list="fileList" multiple result-type="file" :after-read="handleUpload" /> ... async handleUpload(event) { this.$loading.open('上传中') let { ro
  • uniapp图片上传预览

    千次阅读 2020-02-27 15:44:34
    在uniapp中,提供了uni.chooseImage和uni.uploadFile接口,我们很容易的就可以实现图片上传,而uni.previewImage是官方提供的预览功能,下面来展示下: 先看下template部分 <template> <view> &...
  • 添加了图片上传之后预览功能(真机调试也可以) 预览功能可以删除并重新选择图片 先新建一个小程序项目(我先没使用云开发,直接建的js项目) 小程序app.js进行配置 App({ onLaunch() { wx.cloud.init({ env: ...
  • vant实现多图上传

    千次阅读 2019-04-19 11:58:11
    .then(res => { this.uploadImages = [...this.uploadImages, ...res.Result] }) //将服务器返回的图片链接添加进img数组,进行预览展示 }, //删除预览图片按钮 imgclose (e) { this.uploadImages.splice(e, 1) }, ....
  • html代码 <van-uploader v-model="videoList" :max-count="1" preview-size="120px" accept="video/*" :after-read="handlevideosc" :before-read="handlebefread" @click-preview=".
  • .wxml <van-uploaderfile-list="{{fileList}}"bind:after-read="afterRead"bind:delete="delete"multiple="{{true}}"/> .json "usingComponents":{ ..."van-uploader":"@vant/weapp/uploader/index" } .js
  • 1.给图片点击查看创造全局变量 在data中定义instance_before lookImg() { this.instance_before = ImagePreview({ ...2.在当前页面同过钩子函数在路由离开的时候,关闭预览图片 beforeRouteL..
  • Vant框架实现图片上传

    千次阅读 2020-11-10 15:55:25
    Vant框架实现图片上传一、Vant框架简介二、图片上传案例实现 一、Vant框架简介 二、图片上传案例实现
  • 即在打开图片预览功能后,如果不关闭预览图片,同时改变路由的话,会发现即使路由改变了,预览图片还在文档的最顶层显示,如图: 着实让员外百思不其解,在调用vant 的 ImagePreview )图片预览组件中,没有html...
  • 扫码预览:项目源码在文章结尾处,记得查收哦~主要功能常用目录别名Vant/Rem适配scss支持、_mixin.scss、_variables.scss页面切换动画+keepAlive页面标题自动注册:自动注册路由表/自动注册Vuex/svg图标引入mock ...
  • 微信小程序-vant组件上传图片并回显

    千次阅读 2020-07-24 19:33:17
    js: afterRead:function(event){ console.log(event); const { file } = event.detail; const{fileList=[]} = this.data; fileList.push({url:file.path}); this.setData({fileList}) console.log(fileList) ...
  • 正常情况下都是这样写的,但是vant这个框架不知道怎么想的,居然加载不出来,花里胡哨。文档也没有写怎么加载本地图片,到处挖坑。如图: 加载失败 解决办法: src属性绑定requeir()方法 :src=require('../...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 401
精华内容 160
关键字:

vant图片上传预览