使用原生input的file属性上传图片和element的多路径上传图片

//使用原生的input属性//作品上传
                <input
                class="uploading__input"
                name="file"
                @change="readImg($event,‘work‘)"
                type="file"
                id="file"
                value=""
                accept="image/*"
                capture="camera"
              >
//封面上传
                <input
                class="uploading__input"
                name="file"
                @change="readImg($event,‘cover‘)"
                type="file"
                id="file"
                value=""
                accept="image/*"
                capture="camera"
              >
// 上传
    readImg(event) {
      console.log(event);
      let file = event.target.files[0];
      let param = new FormData(); // 创建form对象
      param.append("picture", file); // 通过append向form对象添加数据
      console.log(param.get("picture")); // FormData私有类对象,访问不到,可以通过get判断值是否传进去
      let config = {
        headers: { "Content-Type": "multipart/form-data" }//设置 请求头
      };
      uploading_api(param, config).then(res => {
        this.uploadfrom.picture = res.data;
        this.$message.success("上传成功");
      });
    },使用element批量上传
   结构:       <el-upload
            class="uploading-wrap"
            :action="actionUrl" //上传路径 `${base.url}home/uploading`,
            :file-list="fileList" //存放图片的数组
            :on-preview="handlePictureCardPreview" //预览
            multiple //批量
            :limit="limitnumber" //最大个数
            list-type="picture-card"//样式
            :on-exceed="isexceed" //超过最大个数的回调
            :on-success="issuccess" // 成功的回调
          >
            <div class="uploading">
              <i
                class="iconfont upload_icon"
                style="color: #FF8A00;display:block;font-size: 38px;"
              ></i>
              <p class="uploading-text1">点击添加作品</p>
              <p class="uploading-text2">支持psd/png/jpg等格式/RGB模式,尺寸不超过800*800px,大小不超过5M</p>
            </div>
          </el-upload>

<!-- 图片预览 -->

<el-dialog :visible.sync="dialogVisible">

<img width="100%" :src="dialogImageUrl" >

</el-dialog>

methods:

// 预览

handlePictureCardPreview(file) {

this.dialogImageUrl = file.url;

this.dialogVisible = true;

},

// 上传图片成功的钩子

issuccess(res, files, fileList) {

this.uploadfrom.file = fileList;

},

 

原文地址:https://www.cnblogs.com/summer06/p/11896679.html

时间: 2024-10-14 03:18:51

使用原生input的file属性上传图片和element的多路径上传图片的相关文章

html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法(转载)

/** FormData ==>表单数据 能自动把表单数据拼接打包 当ajax发送数据时,发送打包的数据; 还可以使用FormData对象的append(key,value)添加数据 FormData还可以自动帮忙打包文传送件数据,后台通过$_FILES数组接收 说明FormData对象既可以打包发送表单的数据,也可以手动append数据 注意,input Dom对象有一个files属性 十一哥文件数组 **/ <!doctype html> <html> <head&

关于利用input的file属性在页面添加图片的问题

在页面添加图片涉及到兼容的问题怎么解决兼容问题呢?请看下面分析: 在IE浏览器上面我们能直接通过获取其input的value值来获取其图片的路径. 在火狐和谷歌需要用createObjectURL((input的元素).files.item(0))来获取其路径: 现在请看代码: css设置样式部分(可以自己设置好看的样式): *{ margin: 0; padding:0; } #img{ width:50px; } .box{ width: 100px; margin:20px auto; }

原生HTML5 input type=file按钮UI自定义

原生<input type="file" name="file" />长得太丑 提升一下颜值 实现方案一.设置input[type=file]透明度为0,使用绝对定位遮罩在自定义的按钮标签层的之上. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>原生HTML5 input typ

&lt;input type = file/&gt;上传图片限制大小、类型判断、像素判断

<input type = file/>上传图片限制大小.类型判断.像素判断 在项目中经常用到input标签来上传文件,而这些文件通常是图片文件.图片有很多格式我们只需要其中的几种,就需要对用户上传的文件进行验证,在HTML5中有一个新的属性:accept文件类型限制.但是通常我们会用javascript或jQuery编写方法进行验证图片的大小限制.类型判断.像素判断 <!DOCTYPE html> <html> <head> <meta charse

input的file一些实用属性

file自带一些有用的属性,今天整理一下 html: 1.multiple:是否多选,如果在html上面写上multiple="multiple"或者multiple就可以实现多选 2.accept:文件格式,这个可以控制文件格式,比如jpeg和gif还有Png之类的,写法是这样的<input type="file" accept="image/png,image/gif,image/jpeg" /> js: 1.name:文件名字,

关于PHP HTML &lt;input type=&quot;file&quot; name=&quot;img&quot;/&gt;上传图片,图片大小,宽高,后缀名。

在我们的系统中,不免要上传图片,视频等文件,在上传中,需要做的一些判断,文件大小等方面. 注意: 在php.ini 中的post_max_size,upload_max_filesize默认为2M,在上传视频的时候,需要修改下,可以自行设置. 另外如果启用了内存限制,那么该值应当小于memory_limit选项的值. 在上传视频的时候,可以会需要花费些时间,当超过一定的时间,会报脚本执行超过30秒的错误,这是因为在php.ini配置文件中max_execution_time配置选项在作怪,其表示

前端实现input[type=&#39;file&#39;]上传图片预览效果

众所周知JavaScript在设计上处于安全角度考虑,是不允许读写本地文件的(原因请自行百度): 但是在实际项目应用中,经常会使用到上传图片,并且可以让用户直接预览图片.对于此种做法有两种方法可以实现:一是前后台交互,后台将图片地址返回前端: 二是,我今天写的内容,使用FileReader对象--允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容:此种方法可以优化图片加载速度,减少方法一占用带宽的问题: 但是,此种方法兼容性存在问题,主要是IE浏览器(ie10以上没问题

处理同一页面中借助form+input[type=&quot;file&quot;]上传图片出现的input无法清空问题

今天下午帮同事改了这样一个bug: 在一个页面中对多张图进行上传时,由于input的value无法情况的问题,导致每次选完图片后,都跟第一张图片一样,无法出现如下效果: 百度了下思路:先将input取到,然后放到一个临时form里面清空,最后删掉form. 代码如下: 首先是生成图片选择和显示部分的绑定代码: var img_tmp = '<tr><td><input type="text" name="code" value=&quo

jquery-fileupload IE8IE9无法上传图片的BUG及如何给input[type=file]自定义样式

先说IE9,点击上传后,浏览器会提示下载内容. 原因:IE9及以下上传文件的响应头的contentType 如果是json,浏览器会以为是文件下载. 处理方法:找后台GG,把contentType改为text/html. 再修改done方法,获得地址 done: function(e, data){ var result = data.result[0].body ? data.result[0].body.innerHTML : data.result; result = JSON.parse