图片上传(Base64)

野性酷女 2022-06-17 11:16 369阅读 0赞

### 图片上传(Base64) ###

###### HTML ######

<label for="pic_upload" class="file-update-title">
        标题<span>添加<strong>+<strong></span>
        // 点击触发文件上传 改变触发图片更新
        <input @change="uploadPic($event)" type='file' id='pic_upload' name="ensure_file"/>
    </label>
    
    <div class="parentFileBox">
        <ul class="fileBoxUl">
            // 根据图片数组遍历
            <li v-for="(item, index) in img_arr">
                <label for="true_pic1">
                    <div class="viewThumb">
                        <img :src="item" alt="第一张"/>
                    </div>
                    // 点击取消时根据下标删除对应的图片
                    <div class="diyCancel" @click="removePic(index)"></div>
                    <div class="diymodel"></div>
                </label>
            </li>
        </ul>
    
    </div>

###### JS ######

var app = new Vue({
      el: '#app',
      data: {
    
        // 默认图片数组
        img_arr: []
      },
      methods: {
    
          // 更新图片
          uploadPic: function (e, sign) { 
    
              // 获取从input元素返回的FileList对象
              var file = e.target.files[0];
              var self = this;
    
              // 接受 jpeg, jpg, png 类型的图片
              if (!/\/(?:jpeg|jpg|png|gif|bmp)/i.test(file.type)) return;
    
              // 使用FileReader对象异步读取文件
              var fr = new FileReader()
    
              // 读取制定的File对象，操作完成触发loadend事件
              // result属性将包含一个data:URL格式的字符串
              fr.readAsDataURL(file)
    
              // 读取时触发load事件
              fr.onload = function (e) { 
                var result = e.target.result;
    
                // 存储base64到数组
                self.img_arr.push(result)
              }
          },
          // 删除图片方法
          removePic(index) {
              this.img_arr.splice(index, 1);
          }
      }
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，369人围观）

还没有评论，来说两句吧...

相关阅读

相关图片上传(Base64)

图片上传(Base64) HTML <label for="pic_upload" class="file-update-title"> 标

野性酷女/ 2022年06月17日 11:16/ 0 赞/ 369 阅读

相关 Base64位图片上传和解密

/ base64位图片加密 / public static String getImageStr(String imgFile) {

- 日理万妓/ 2022年06月09日 03:07/ 0 赞/ 220 阅读

相关 base64图片上传七牛云

直接上代码： // 上传base64图片到七牛 putb64=function(picBase){/picBase是base64图片带头部的完整编码/

小鱼儿/ 2022年05月23日 10:52/ 0 赞/ 286 阅读

相关图片上传前压缩，base64图片压缩

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

你的名字/ 2022年05月18日 00:58/ 0 赞/ 277 阅读

相关 elementui把上传的图片转为base64

使用组件，然后on-change绑定一个方法来获取文件信息，auto-upload设置为false即可 <el-upload action='' :on-chan

傷城~/ 2022年03月29日 12:10/ 0 赞/ 1340 阅读

相关图片上传 Base64 编码解码转换

图片上传 Base64 编码解码转换图片上传时往往进行压缩处理，将压缩后的图片再传输给后端，这里以Base64编码来替代压缩，仅作演示，附Demo，前后端代码 Ht

我就是我/ 2022年02月20日 04:00/ 0 赞/ 356 阅读

相关 javascript 图片预览(base64 上传)

示例图： ![20190528232119382.gif][] 源码： <!DOCTYPE html> <html lang="en"> <hea

短命女/ 2022年01月26日 11:43/ 0 赞/ 507 阅读

相关上传图片格式为base64

后端设置base64格式的图片前提：下载node.js 安装导入js脚本 ![在这里插入图片描述][20190624172552951.png]

短命女/ 2022年01月06日 07:19/ 0 赞/ 395 阅读

相关 base64实现图片多图上传功能

function webPic\_upload($savepath,$url\_data)\{ $mark=ture; $pic\_url=''; if(is\_a

红太狼/ 2021年09月20日 09:28/ 0 赞/ 311 阅读

相关 uniapp--上传图片转base64

最近后端接口更新，需要使用图片Base64+图片类型（png/jpg等）上传; 试了好多兼容小程序的方法; 小程序参考[uni-app上传图片转base64\_网络\_

以你之姓@/ 2021年09月13日 16:02/ 0 赞/ 1330 阅读