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 相关文章推荐
共享自己写一个框架DreamScript
Jan 20 Javascript
在网站上应该用的30个jQuery插件整理
Nov 03 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
基于javascript实现单选及多选的向右和向左移动实例
Jul 25 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
小程序云开发实战小结
Oct 25 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 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 feof用来识别文件末尾字符的方法
2010/08/01 PHP
PHP 调试工具Debug Tools
2011/04/30 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
Document对象内容集合(比较全)
2010/09/06 Javascript
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Django Admin 实现外键过滤的方法
2017/09/29 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
python用户管理系统
2018/03/13 Python
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
基于python实现学生管理系统
2018/10/17 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
Python简易版图书管理系统
2019/08/12 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
基于python实现学生信息管理系统
2019/11/22 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
幼儿园个人总结
2015/02/28 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
MySQL系列之四 SQL语法
2021/07/02 MySQL
MongoDB数据库之添删改查
2022/04/26 MongoDB
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js