vue中实现图片和文件上传的示例代码

 更新时间:2018年03月16日 09:49:55   投稿:jingxian  
下面小编就为大家分享一篇在vue中实现图片和文件上传的示例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

html页面

<input type="file" value="" id="file" @change='onUpload'>//注意不能带括号

js代码

methods: {
//上传图片
onUpload(e){
      var formData = new FormData(); 
    f ormData.append('file', e.target.files[0]);
    formData.append('type', 'test');
      $.ajax({
        url: '/ShopApi/util/upload.weixun',//这里是后台接口需要换掉
        type: 'POST',
        dataType: 'json',
        cache: false,
        data: formData,
        processData: false,
        contentType: false,
        success: (res) => {        
          if (res.code === 200) {
            var img_tpl ='<div class="picture" style="width:108px;float:left;"><img id="preview" src="'+后台返回的tu'pian路径+'" style="width:48px;height:48px;float:left;background-size:cover;"/><span class="r-span"
 onclick = "onDeletePicture()" style="color:#49BDCC;display:block;float:left;margin-left:10px;line-height:48px;">删除</span></div>';
            $("#refund_img").after(img_tpl);
          }
        },
        error: function(err) {
        alert("网络错误");
        }
      });
} 
}

图片效果图

以上这篇vue中实现图片和文件上传的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue中marker被识别点击的过程场景分析

    vue中marker被识别点击的过程场景分析

    这篇文章主要介绍了vue中marker被识别点击的过程场景分析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-11-11
  • vue3 elementPlus部分组件样式修改的方法

    vue3 elementPlus部分组件样式修改的方法

    这篇文章主要介绍了vue3 elementPlus部分组件样式修改的方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-01-01
  • vue 实现通过vuex 存储值 在不同界面使用

    vue 实现通过vuex 存储值 在不同界面使用

    今天小编就为大家分享一篇vue 实现通过vuex 存储值 在不同界面使用,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue内置指令详解

    vue内置指令详解

    指令是Vue模板中最常用的一项功能,它带有前缀v-,主要职责是当其表达式的值改变时,相应的将某些行为应用在 DOM 上。这篇文章主要介绍了vue内置指令详解,需要的朋友可以参考下
    2018-04-04
  • 轻松学Vue组件之单文件组件

    轻松学Vue组件之单文件组件

    一个组件相当于是一个小模块,它是html、css与js的集合体,可以用于描述页面中的某个结构(模块),下面这篇文章主要给大家介绍了关于轻松学Vue组件之单文件组件的相关资料,需要的朋友可以参考下
    2023-03-03
  • 教你如何通过Vue路由改变地址栏的参数

    教你如何通过Vue路由改变地址栏的参数

    Vue是一款非常流行的JavaScript框架,它提供了许多方便开发者的功能,本文将介绍如何通过Vue路由改变地址栏的参数,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • 详解vue渲染从后台获取的json数据

    详解vue渲染从后台获取的json数据

    这篇文章主要介绍了详解vue渲染从后台获取的json数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • vue3+springboot部署到Windows服务器的详细步骤

    vue3+springboot部署到Windows服务器的详细步骤

    这篇文章主要介绍了vue3+springboot部署到Windows服务器,配置Nginx时,因为现在是把vue前端交给了Nginx代理,所以这里的端口号不一定是我们在vue项目中设置的端口号,本文给大家介绍的非常详细,需要的朋友参考下吧
    2022-10-10
  • nuxt踩坑之Vuex状态树的模块方式使用详解

    nuxt踩坑之Vuex状态树的模块方式使用详解

    这篇文章主要介绍了nuxt踩坑之Vuex状态树的模块方式使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • Vue项目实现html5图片上传的示例代码

    Vue项目实现html5图片上传的示例代码

    本文主要介绍了Vue项目 html5图片上传,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01

最新评论