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

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

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

OSS平台配置

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

关于跨域访问的配置

这里是我的效果图 (当只有点击上传按钮时才会上传到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>

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

(0)

相关推荐

  • vue上传图片组件编写代码

    本文实例教大家如何编写一个vue上传图片组件,具体如下 1.首先得有一个[type=file]文件标签并且隐藏,changge事件来获取图片: <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/> 2.触发隐藏的文件标签:(通过原生的click来触发) document.ge

  • vue.js 上传图片实例代码

    最近爱上了用vue.js做前端,昨天用vue上传图片时遇到了问题,最后半天时间终于摸索出来,我将相关部分的代码贴出来. 前端部分 <div class="form-group"> <label>背景图</label> <input type="file" class="form-control" @change="onFileChange"> </div> <d

  • vuejs使用FormData实现ajax上传图片文件

    我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. 其实已经有朋友封装了相关的npm包,但是我想说用原生的js api来实现,也用不了多少代码,而且更灵活,能使用原生就尽量用原生.接下来就以一个简单的头像上传来说明如何使用. 效果图 前端实现 <template> <div class="admin"> <d

  • 基于VUE选择上传图片并页面显示(图片可删除)

    基于VUE选择上传图片并在页面显示,图片可删除,具体内容如下 demo例子: 依赖文件:jqueryform HTML文本内容: <template> <div id="accident"> <div class="wrapper"> <i class="icon-pic"></i>相关照片 <button type="button" @click="

  • vue axios 表单提交上传图片的实例

    项目中用的element 的框架,然后在项目有一个添加数据需求是图片可上传,也可不上传, 然后问题就是element 中的上传控件在没有图片的时候是不会触发提交的,但接口写的是有file的  multipart/form-data    接收模式 所有只能自己另个模仿一个表单上传 <input class="file" name="file" type="file" accept="image/png,image/gif,imag

  • vue项目中使用axios上传图片等文件操作

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 首先安装axios: 1.利用npm安装npm install axios –save 2.利用bower安装bower install axios

  • VUE axios上传图片到七牛的实例代码

    浏览器上传图片到服务端,我用过两种方法: 1.本地图片转换成base64,然后通过普通的post请求发送到服务端. 操作简单,适合小图,以及如果想兼容低版本的ie没办法用此方法 2.通过form表单提交. form表单提交图片会刷新页面,也可以时form绑定到一个隐藏的iframe上,可以实现无刷新提交数据.但是如果想传输多条form表单数据,需要写很多dom,同时还要写iframe,太麻烦. 目前感觉比较干净的办法就是通过axios的post请求,发送form数据到后台. html部分,至于界

  • vue.js图片转Base64上传图片并预览的实现方法

    对于前端人员来说,图片处理是一个很常见的需求,由于图片稍微特殊,现在多数做法都是使用调用ajax接口通过http方法来提交,例如post方法提交,后台处理后返回一个图片路径给前端,前端根据这个路径写入img标签,但是基于当前的前后端分离的开发模式下,前后端代码往往不在同一个系统目录下,而且部署时可能liunx路径与windows路径不一样,这样后期路径更改可能会导致维护困难问题出现. 针对这种问题,这里我推荐使用图片转base64格式,再发给后端,后端只需将转码结果存入数据库即可,前端调用接口直

  • vue实现的上传图片到数据库并显示到页面功能示例

    本文实例讲述了vue实现的上传图片到数据库并显示到页面功能.分享给大家供大家参考,具体如下: 1.点击上传图片,弹出选择图片选项框. 页面代码: <div class="form-signin-heading" id="btnUpload" @change="upload">上传图片</div> <input type="file" name="avatar" id="

  • 使用vue构建一个上传图片表单

    这篇博客也不知道起个什么名字比较好,毕竟刚开始学习vue,很多还不是很熟悉,一直在慢慢摸索中:之前也习惯了用jQuery写js代码,思维逻辑也要有个转换的过程. 1. 转变思维 使用vue编写代码,首先要做的就是转换思维,vue是一个数据驱动的框架,我们只需要操作数据,数据变化后,vue会自动改变DOM结构,而jQuery是直接操作DOM的.比如刚开始写的代码中犯的错误,有一个页面中的input标签是并列多个的,而且name属性的值是自增的,那么我就用v-for循环下,把index填充进去就行了

随机推荐