vue上传图片到oss的方法示例(图片带有删除功能)


Posted in Javascript onSeptember 27, 2018

最近Vue项目中,要将用户上传的图片全部上传到oss上,

OSS配置项请访问:https://help.aliyun.com/document_detail/64095.html?spm=a2c4g.11186623.6.773.kcD20n

OSS平台配置

在平台的概览里面看看自己的基础设置里面的读写权限是否改为了公共读,我这边只有配置公共读才上传并且回显图片成功,其他情况还请朋友告知,谢谢

关于跨域访问的配置

vue上传图片到oss的方法示例(图片带有删除功能)

这里是我的效果图 (当只有点击上传按钮时才会上传到OSS)

vue上传图片到oss的方法示例(图片带有删除功能)

预览图片

<template>
  <div class="vue-uploader">
    <div class="file-list">
      <section v-for="(file, index) of files" class="file-item draggable-item" :key="file.name">
        <img :src="file.src" alt="" ondragstart="return false;">
        <span class="file-remove" @click="remove(index)">+</span>
      </section>
      <section v-if="status == 'ready'" class="file-item">
        <div @click="add" class="add"></div>
      </section>
    </div>
    <section v-if="files.length != 0" class="upload-func">
      <div class="progress-bar">
        <section v-if="uploading" :width="(percent * 100) + '%'">{{(percent * 100) + '%'}}</section>
      </div>
      <div class="operation-box">
        <button v-if="status == 'ready'" @click="submit">上传</button>
        <button v-if="status == 'finished'" @click="finished">完成</button>
      </div>
    </section>
    <input type="file" @change="fileChanged" ref="file" multiple="multiple" accept="image/jpg,image/jpeg,image/png,image/bmp">
  </div>
</template>
<script>
  export default {
    data() {
      return {
        status: 'ready',
        files: [],
        point: {},
        uploading: false,
        percent: 0
      }
    },
    methods: {
      add() {
        this.$refs.file.click()
      },
      submit() {
        console.log(this.files)
        // if (this.files.length === 0) {
        //   console.warn('no file!');
        //   return
        // }
        var that=this
       // 这里是OSS
        const client = new OSS.Wrapper({
          region: 'oss-cn-hangzhou', 
          accessKeyId: 'your access key',
          accessKeySecret: 'your access secret',
          bucket: 'your bucket name'
        });
        const fNum = this.files;
        for(var i=0;i<fNum.length;i++){
          var f=fNum[i].file
          console.log(f)
          const Name=f.name
          console.log(Name)
          const suffix = Name.substr(Name.indexOf("."));
          const obj=this.timestamp();
          const storeAs = 'header/'+obj+suffix // 路径+时间戳+后缀名
          console.log(storeAs)
          client.multipartUpload(storeAs, f).then(function (result){
            console.log(result.res.requestUrls)
          })
        }
      },
      // 时间戳
      timestamp:function(){ 
        const time = new Date(); 
        const y = time.getFullYear(); 
        const m = time.getMonth()+1; 
        const d = time.getDate(); 
        const h = time.getHours(); 
        const mm = time.getMinutes(); 
        const s = time.getSeconds(); 
        const ms = time.getMilliseconds() 
        return ""+y+this.Add0(m)+this.Add0(d)+this.Add0(h)+this.Add0(mm)+this.Add0(s)+this.Add0(ms); 
      },
      Add0:function(m){ 
        return m<10?'0'+m : m; 
      } ,

      finished() {
        this.files = []
        this.status = 'ready'
        
      },
      remove(index) {
        this.files.splice(index, 1)
      },
      fileChanged() {
        const list = this.$refs.file.files
        for (let i = 0; i < list.length; i++) {
          if (!this.isContain(list[i])) {
            const item = {
              name: list[i].name,
              size: list[i].size,
              file: list[i]
            }
            this.html5Reader(list[i], item)
            this.files.push(item)
          }
        }
        this.$refs.file.value = ''
      },
      // 将图片文件转成BASE64格式
      html5Reader(file, item){
        const reader = new FileReader()
        reader.onload = (e) => {
          this.$set(item, 'src', e.target.result)
        }
        reader.readAsDataURL(file)
      },
      isContain(file) {
       return this.files.find((item) => item.name === file.name && item.size === file.size)
      },
    }
  }
</script>
<style>
.vue-uploader {
  border: 1px solid #e5e5e5;
}
.vue-uploader .file-list {
  padding: 10px 0px;
}
.vue-uploader .file-list:after {
  content: '';
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
  font-size: 0;
}
.vue-uploader .file-list .file-item {
  float: left;
  margin-left: 10px;
  
  position: relative;
  width: 150px;
  text-align: center;
}
.vue-uploader .file-list .file-item img{
  width: 150px;
  height: 150px;
  border: 1px solid #ececec;
}
.vue-uploader .file-list .file-item .file-remove {
  position: absolute;
  right: 4px;
  display: none;
  top: 4px;
  width: 20px;
  height: 20px;
  font-size:20px;
  text-align: center;
  color: white;
  cursor: pointer;
  line-height: 20px;
  border-radius: 100%;
  transform: rotate(45deg);
  background: rgba(0, 0, 0, 0.5);
}
.vue-uploader .file-list .file-item:hover .file-remove {
  display: inline;
}
.vue-uploader .file-list .file-item .file-name {
  margin: 0;
  height: 40px;
  word-break: break-all;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.vue-uploader .add {
  width: 150px;
  height: 150px;
  float: left;
  text-align: center;
  line-height: 150px;
  font-size: 30px;
  cursor: pointer;
  background: url(../assets/upImg.png) no-repeat; // 这里使用的是我本地图片
  background-size: 100% 100%;
}
.vue-uploader .upload-func {
  display: flex;
  padding: 10px;
  margin: 0px;
  background: #f8f8f8;
  border-top: 1px solid #ececec;
}
.vue-uploader .upload-func .progress-bar {
  flex-grow: 1;
}
.vue-uploader .upload-func .progress-bar section {
  margin-top: 5px;
  background: #00b4aa;
  border-radius: 3px;
  text-align: center; 
  color: #fff;
  font-size: 12px;
  transition: all .5s ease;
}
.vue-uploader .upload-func .operation-box {
  flex-grow: 0;
  padding-left: 10px;
}
.vue-uploader .upload-func .operation-box button {
  padding: 4px 12px;
  color: #fff;
  background: #007ACC;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}
.vue-uploader > input[type="file"] {
  display: none;
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype使用指南之ajax
Jan 10 Javascript
jQuery的一些特性和用法整理小结
Jan 13 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
AngularJS中$apply方法和$watch方法用法总结
Dec 13 Javascript
javascript添加前置0(补零)的几种方法
Jan 05 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 #Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 #Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
Sep 27 #Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 #Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 #Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 #Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 #Javascript
You might like
PHP简介
2006/10/09 PHP
PHP Token(令牌)设计
2008/03/15 PHP
php array的学习笔记
2012/05/16 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
微信小程序实现图片上传功能
2018/05/28 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
Python入门篇之数字
2014/10/20 Python
python数据结构之链表的实例讲解
2017/07/25 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
Python tkinter label 更新方法
2018/10/11 Python
python super的使用方法及实例详解
2019/09/25 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
汽车质检员岗位职责
2015/04/08 职场文书
大学运动会通讯稿
2015/07/18 职场文书
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js