Skip to content

V
vue-office-upload-image
Commit e0fa8aae by 无尘
Options

fix: 修改上传格式

parent 2d270a4b
Showing with 663 additions and 0 deletions
.babelrc 0 → 100644
{
"presets": [
["env", { "modules": false }],
"stage-3"
]
}
.editorconfig 0 → 100644
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
.gitignore 0 → 100644
.DS_Store
dist/
node_modules/
npm-debug.log*
package-lock.json
# Editor directories and files
.idea
vscode
*.suo
*.ntvs*
*.njsproj
*.sln
index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>vue-office-upload-image</title>
</head>
<body>
<div id="app"></div>
<!-- <script src="/dist/build.js"></script> -->
<script src="/dist/vue-office-upload-image.js"></script>
</body>
</html>
src/App.vue 0 → 100644
<template>
<div style="padding:20px;">
<!-- <vue-gic-store-group :model="storeGroupData" @commit-store="getStoreGroup"></vue-gic-store-group> -->
<div class="upload-img">
<gic-upload-image
:projectName="projectName"
:wxFlag="wxFlag"
:imgRate="imgRate"
:actionUrl="actionUrl"
:imageList="imageList"
:limitW="limitW"
:limitH="limitH"
:maxImageLength="maxlength"
@uploadOnSuccess="uploadOnSuccess"
@sortImg="sortImg"
@deleteImage="deleteImage">
</gic-upload-image>
</div>
</el-input>
</div>
</template>
<script>
import gicUploadImage from './lib/gic-upload-image';
export default {
name: 'app',
components: {
gicUploadImage
},
data() {
return {
projectName: 'gic-web', // 当前项目名
wxFlag: '', // '1': 表示需要返回微信图片地址
imgRate: '1:1', // 限制图片上传比例 如 '1:1'
limitW: 250, // 上传图片的限制宽度(数字)
limitH: 250, // 上传图片的限制高度(数字)
actionUrl: '/api-plug/upload-img',
dialogVisible: false,
maxlength: 10,
dialogImageUrl: '',
// 保存的图片集合 负责回显和上传
imageList: [{
url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537965482912&di=a6fc96e35e75b37ef01afa6e2dde925b&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F2cf5e0fe9925bc316045679855df8db1cb137091.jpg'
}, {
url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537965522381&di=f259f5996e42a9abfac2d0f12798440c&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201412%2F04%2F20141204221313_uWxYi.jpeg'
},
{
url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537965482912&di=a6fc96e35e75b37ef01afa6e2dde925b&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F2cf5e0fe9925bc316045679855df8db1cb137091.jpg'
}, {
url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537965522381&di=f259f5996e42a9abfac2d0f12798440c&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201412%2F04%2F20141204221313_uWxYi.jpeg'
},
{
url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537965482912&di=a6fc96e35e75b37ef01afa6e2dde925b&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F2cf5e0fe9925bc316045679855df8db1cb137091.jpg'
}, {
url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537965522381&di=f259f5996e42a9abfac2d0f12798440c&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201412%2F04%2F20141204221313_uWxYi.jpeg'
},
{
url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537965482912&di=a6fc96e35e75b37ef01afa6e2dde925b&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F2cf5e0fe9925bc316045679855df8db1cb137091.jpg'
}, {
url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537965522381&di=f259f5996e42a9abfac2d0f12798440c&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201412%2F04%2F20141204221313_uWxYi.jpeg'
}],
data: [
{
name: 'shiyao',
age: 24,
children: [{
name: 'lisi',
age: 23,
children: [{
name: 'zhaoliu',
age: 22
}]
}]
}
]
};
},
methods: {
// 上传成功触发的方法
uploadOnSuccess(obj) {
console.log(obj)
obj.file.url = obj.res.result[0].qcloudImageUrl
this.imageList.push(obj.file);
},
deleteImage(i) {
this.imageList.splice(i, 1);
},
handleTag(eve) {
console.log(eve);
},
// 排序图片
sortImg(val) {
this.imageList = val;
}
}
}
</script>
<style>
* {
margin: 0;
padding: 0;
}
</style>
src/lib/gic-upload-image.vue 0 → 100644
<template>
<div class="gic-upload__img">
<!-- 上传成功的图片展示 -->
<div class="gic-upload__img__drag">
<draggable
:options="{group:{name:'people', pull:false, put:true },sort: true}"
v-model="dragImageList"
@end="itemMoveEnd"
class="drag-wrap" style="display: contents;">
<transition-group name="slide-fade">
<div v-for="(item, index) in imageList" :class="['img-content',index>=6?'m-t-8': '']" :key="index">
<a class="item-img" :href="item.url">
<img :src="item.url" alt="上传图片">
</a>
<!-- 预览和删除按钮 -->
<div class="upload-icon__btn">
<i class="el-icon-view" @click="previewImage(index)"></i>
<i class="el-icon-delete" @click="deleteImage(index)"></i>
</div>
</div>
</transition-group>
</draggable>
<!-- 上传进度条 -->
<div :class="['img-content', 'img-progress',imageList.length >= 6? 'm-t-8':'']" v-if="!pass && progress !== 0">
<el-progress class="gic-img-progress" :width="102" :percentage="progress" :status="propStatus" style="line-height: 102px;"></el-progress>
</div>
<!-- 图片上传部分 -->
<div :class="['img-upload',imageList.length >= 6? 'm-t-8':'']" v-if="imageList && imageList.length < maxImageLength">
<el-upload
class="loader"
accept="image/jpg,image/jpeg,image/png,image/gif"
:action="uploadUrl()"
list-type="picture-card"
:on-change="uploadOnChange"
:before-upload="beforeAvatarUpload"
:on-success="uploadOnSuccess"
:on-error="uploadOnError"
:on-progress="uploadOnProgress">
<i class="el-icon-plus gic-upload-btn"></i>
</el-upload>
</div>
</div>
<el-dialog
title="图片预览"
:visible.sync="isEnlargeImage"
:modal-append-to-body="false"
:before-close="handleClose"
width="520px">
<el-carousel v-if="isEnlargeImage" trigger="click" :initial-index="initialImg" :autoplay="false" height="500px">
<el-carousel-item v-for="(img, index) in imageList" :key="index" style="display: flex;align-items: center;justify-content: center;">
<img @click="isEnlargeImage = false" style="max-width: 480px;max-height: 500px;" :src="img.url">
</el-carousel-item>
</el-carousel>
</el-dialog>
</div>
</template>
<script>
/**
放大预览
删除
添加到循环里面
开始上传 上传失败 上传成功三个步骤
上传图片的进度条是固定的样式大小、如果我这边修改的话
会不会影响其他地方的样式
*/
import draggable from 'vuedraggable';
export default {
name: 'vue-office-upload-image',
props: {
projectName: {
type: String,
default: 'haoban-manage-web'
},
wxFlag: {
type: String,
default: '1'
},
imgRate: {
type: String
},
// 上传地址
actionUrl: {
type: String,
default: ''
},
// 图片限制 不能超过 超过隐藏上传按钮
maxImageLength: {
type: Number,
default: 5
},
limitW: {
type: Number
},
limitH: {
type: Number
},
imageList: {
type: Array,
default() {
return [];
}
}
},
data() {
return {
dragImageList: this.imageList,// 传递的图片数据
initialImg: 0, // 初始索引
progress: 0, // 上传进度
pass: null, // 是否上传成功
isEnlargeImage: false, // 放大图片
enlargeImage: '' // 放大的图片的地址
};
},
computed: {
propStatus() {
if (this.pass) {
return 'success';
} else if (this.pass === false) {
return 'exception';
} else {
return 'text';
}
}
},
beforeMount() {
// this.action = this.actionUrl;
},
methods: {
// 获取 action 的 url
uploadUrl() {
var that = this
var host = window.location.origin;
var baseUrl;
var wxFlag;
wxFlag = !!that.wxFlag && that.wxFlag != ''? 'wxFlag='+that.wxFlag + '&': '';
console.log("当前host:",host)
if (host.indexOf('localhost') != '-1') {
baseUrl = 'http://www.gicdev.com';
}else {
baseUrl = host
}
that.upUrl = baseUrl + that.actionUrl +'?'+ wxFlag+ 'requestProject=' + that.projectName
console.log(that.upUrl)
return that.upUrl
},
// 上传之前回调
beforeAvatarUpload(file) {
var that = this
const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/jpg' || file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
that.$message.error('上传图片只能是 jpg/jpeg/png 格式!');
}
if (!isLt2M) {
that.$message.error('上传图片大小不能超过 2MB!');
}
return isLt2M && new Promise(function(resolve, reject) {
let reader = new FileReader();
reader.onload = function(event) {
let image = new Image();
image.onload = function () {
let width = this.width;
let height = this.height;
// console.log(width,height,!that.imgRate)
if (!!that.imgRate && that.imgRate !=='' ){
let limitRate = Number(that.imgRate.split(':')[0])/Number(that.imgRate.split(':')[1]);
let realRate = Number(width)/Number(height);
console.log(limitRate,realRate)
if (limitRate != realRate) {
that.$message.error('上传图片比例不正确!');
reject();
}
}
if ((!that.imgRate||that.imgRate =='') && !!that.limitW && that.limitH && width !== that.limitW && height !== that.limitH){
that.$message.error('上传图片尺寸不正确!');
reject();
}
resolve();
};
image.src = event.target.result;
console.log("上传 onload:",event.target.result)
};
reader.readAsDataURL(file);
})
},
// 上传成功
uploadOnSuccess(res, file) {
var that = this
this.pass = true;
if (res.errorCode == 1) {
that.$message.success('上传成功');
that.$emit('uploadOnSuccess',{res:res,file:file}, that.imageList);
}else {
that.$message.error(res.message)
}
},
// 开始上传
uploadOnProgress(e, file) {
if (e && e.percent) {
this.progress = Math.floor(e.percent);
}
},
uploadOnChange(file) {
if (file.status === 'ready') {
this.pass = null;
this.progress = 0;
} else if (file.status === 'fail') {
this.$message.error('图片上传失败，请重试！');
}
},
uploadOnError() {
},
// 预览图片
previewImage(i) {
this.isEnlargeImage = true;
this.initialImg = i;
},
// 删除图片
deleteImage(i) {
this.$emit('deleteImage', i);
// this.imageList.splice(i, 1);
},
// 关闭弹层
handleClose(done) {
done();
},
// move end
itemMoveEnd(evt) {
var that = this
that.$emit('sortImg', that.dragImageList);
}
},
watch: {
imageList: function(newData,oldData){
var that = this;
that.dragImageList = newData;
},
},
/* 接收数据 */
mounted() {
var that = this
// that.dragImageList = that.imageList
},
components: {
draggable
},
};
</script>
<style>
.el-upload-dragger {
height: 104px;
line-height: 104px;
width: 104px;
background-color: transparent;
}
.gic-upload__img {
display: inline-block;
}
.gic-upload__img__drag {
max-width: 680px;
display: inline-block;
font-size: 0;
}
.gic-upload__img .img-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin-right: 8px;
width: 104px;
height: 104px;
box-sizing: border-box;
border: 1px solid #dcdfe6;
border-radius: 4px;
cursor: pointer;
}
.img-content.m-t-8 {
margin-top: 8px;
}
.gic-upload__img .img-content .upload-icon__btn{
position: absolute;
font-size: 16px;
display: none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.gic-upload__img .img-content .item-img {
display: flex;
align-items: center;
justify-content: center;
margin: 8px;
height: 86px;
width: 86px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/*border: 1px solid #dcdfe6;*/
border-radius: 0;
}
.gic-upload__img .img-content .item-img img{
position: static;
display: block;
max-width: 86px;
max-height: 86px;
}
.gic-upload__img .img-content::after{
position: absolute;
top: 8px;
left: 8px;
z-index: 1;
content: ' ';
display: block;
height: 86px;
width: 86px;
background-color: rgba(0, 0, 0, .5);
transition: all .3s;
opacity: 0;
}
.gic-upload__img .img-content:hover::after{
opacity: 1;
}
.gic-upload__img .img-content:hover .upload-icon__btn{
display: block;
z-index: 100;
color: #fff;
}
.gic-upload__img .img-upload{
display: inline-block;
vertical-align: middle;
font-size: 28px;
}
.img-upload.m-t-8 {
margin-top: 8px;
}
.el-upload-list--picture-card{
display: none;
}
.el-upload--picture-card {
width: 104px;
height: 104px;
line-height: 104px;
}
.slide-fade-enter-active {
transition: all .6s ease;
}
.slide-fade-leave-active {
transition: all .6s cubic-bezier(.55, 0, .1, 1);
}
.slide-fade-enter, .slide-fade-leave-to {
opacity: 0;
}
</style>
src/lib/index.js 0 → 100644
import component from './gic-upload-image.vue'
const install = {
install(Vue, options) {
Vue.component(component.name, component)
}
}
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(install);
}
export default install;
\ No newline at end of file
src/main.js 0 → 100644
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
\ No newline at end of file
webpack.config.js 0 → 100644
var path = require('path')
var webpack = require('webpack')
var isDev = process.env.NODE_ENV === 'development'
module.exports = {
entry: isDev ? './src/main.js' : './src/lib/index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
// filename: 'build.js',
filename: 'vue-office-upload-image.js',
library: 'vue-office-upload-image',
libraryTarget: 'umd',
umdNamedDefine: true
},
module: {
rules: [{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
],
},
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
// options: {
// limit: 10000,
// name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
// }
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#cheap-module-source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment