vant实现图片和视频上传,vant图片压缩上传

　　这篇文章主要为大家详细介绍了栈上传程序实现上传一张或多张图片组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了栈上传程序实现上传一张或多张图片组件，供大家参考，具体内容如下

　　超文本标记语言部分

　　模板

　　div class=contWrap

　　厢式装载机

　　v-model=fileList

　　:multiple=true

　　:before-read=beforeRead

　　:after-read=afterRead

　　:before-delete=delUploadImg

　　上传-icon=加号

　　！-注：这里是自定义上传样式-

　　！- p

　　货车图标

　　name=plus

　　color=#07c160

　　大小=。5雷姆

　　/

　　上传照片

　　/p -

　　/货车-上传者

　　/div

　　/模板

　　射流研究…部分

　　脚本

　　从" axios "导入axios

　　导出默认值{

　　名称：上传图像，

　　data() {

　　返回{

　　文件列表：[],

　　uploadUrl:"/API/upload/文件上传"，

　　标题：{

　　令牌：这个. store.state.account.token，

　　},

　　};

　　},

　　方法：{

　　//返回布尔值

　　读取前（文件){

　　如果(数组的文件实例){

　　//判断是否是数组

　　file.forEach((v)={

　　这个。检查文件(五)；

　　});

　　}否则{

　　this.checkFile(文件);

　　}

　　返回真实的

　　},

　　//图片类型检查

　　检查文件(文件){

　　const format=[jpg ， png ， JPEG ]；

　　常量索引=文件。姓名。lastindexof( . );

　　const最终名称=文件。姓名。substr(索引1);

　　如果(!格式。包括(姓氏。tolowercase()){

　　吐司(请上传format.join(，) 格式图片);

　　返回错误的

　　}

　　},

　　读后(文件){

　　//此时可以自行将文件上传至服务器

　　如果(数组的文件实例){

　　file.map((v)={

　　v.status=上传

　　v.message=上传中.；

　　这个。上传img(v)；

　　});

　　}否则{

　　file.status=上传

　　file.message=上传中.；

　　this.uploadImg(文件);

　　}

　　},

　　//上传

　　上传（文件){

　　const formData=new formData()；

　　formData.append(file ，file。文件)；

　　爱可信。post(this.uploadUrl，formData，{

　　头：this.headers

　　})。然后((res)={

　　if (res.data) {

　　如果(数组的文件实例){

　　//判断是否是数组

　　file.map((v，i)={

　　五。状态=成功；

　　五。消息=" "；

　　五。URL=RES . data[I]；

　　});

　　}否则{

　　file.status=成功

　　文件。消息=" "；

　　文件。URL=RES . data。上传URL

　　}

　　}

　　})。catch((err)={

　　这个. notify({

　　类型：警告，

　　消息： 上传失败，

　　});

　　});

　　},

　　//删除

　　删除（项目){

　　这个。文件列表=这个。文件列表。filter((v)=v . URL！=项目。网址)；

　　}

　　},

　　};

　　/脚本

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。