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

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

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="/UploadFiles/2021-04-02/'+后台返回的tu'pian路径+'">

图片效果图

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