Research
Recent Trends in Malicious Packages Targeting Discord
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
i-image-upload
Advanced tools
Readme
vue picture component. Resize and preview your uploaded image
import iImageUpload from 'i-image-upload'
import 'i-image-upload/dist/i-image-upload.css'
Vue.use(iImageUpload)
可以在组件内部添加子节点传入自定义的上传按钮类型和文字提示
<form
action="http://localhost:1400/avatar"
method="post"
enctype="multipart/form-data"
>
<i-image-upload name="file">
<i class="demo-icon">+</i>
</i-image-upload>
<button>上传</button>
</form>
使用 before-upload 限制用户上传的图片格式和大小, 只有返回 true, 才会继续上传图片,否则停止
<template>
<form>
<i-image-upload
name="file"
action="http://localhost:1400/avatar"
:before-upload="beforeUpload"
:on-preview="onPreview"
:on-success="onSuccess"
:on-error="onError"
>
<img v-if="imagePreview" :src="imagePreview" class="demo-avatar">
<i class="demo-icon" v-else>+</i>
</i-image-upload>
</form>
</template>
<script>
export default {
data () {
return {
imagePreview: ''
}
},
methods: {
beforeUpload (file) {
const isJPG = file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
console.error('上传头像图片只能是 JPG 格式!')
}
if (!isLt2M) {
console.error('上传头像图片大小不能超过 2MB!')
}
return isJPG && isLt2M
},
onPreview (file) {
this.imagePreview = file
},
onSuccess (res, dataurl) {
console.log(res)
},
onError (res, dataurl) {
console.log(res)
this.imagePreview = ''
}
}
}
</script>
<style scoped>
.demo-icon {
border: 1px dashed lightblue;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
display: block;
font-style: normal;
color: lightblue;
font-size: 26px;
}
.demo-avatar {
border: 1px dashed lightblue;
width: 100px;
height: 100px;
}
</style>
使用 custom-handle-upload 覆盖默认的上传行为,可以自定义上传的实现
<template>
<form>
<i-image-upload
name="file"
action="http://localhost:1400/avatar"
resultType="blob"
:before-upload="beforeUpload"
:customHandleUpload="onhandleUpload"
:on-success="onSuccess"
:on-error="onError"
>
<img v-if="imagePreview" :src="imagePreview" class="demo-avatar">
<i class="demo-icon" v-else>+</i>
</i-image-upload>
</form>
</template>
<script>
export default {
data () {
return {
imagePreview: ''
}
},
methods: {
beforeUpload (file) {
const isJPG = file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
console.error('上传头像图片只能是 JPG 格式!')
}
if (!isLt2M) {
console.error('上传头像图片大小不能超过 2MB!')
}
return isJPG && isLt2M
},
onhandleUpload (formatFile) {
this.imagePreview = formatFile
let filedata = new FormData()
filedata.append('file', data)
return fetch('http://localhost:1400/avatar', {
method: 'post',
mode: 'no-cors',
body: filedata
})
},
onSuccess (res, dataurl) {
console.log(res)
this.imagePreview = res.data.imageUrl
},
onError (res, dataurl) {
console.log(res)
this.imagePreview = ''
}
}
}
</script>
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 上传的图片字段名 | String | file |
disabled | 是否禁用 | Boolean | false |
maxWidth | 不压缩上传的最大宽度 autoScale为true的时候才有用 | Number | 1024 |
maxHeight | 不压缩上传的最大高度 autoScale为true的时候才有用 | Number | 1024 |
autoScale | 上传图片超出maxWidth或者maxHeight时自动压缩 | Boolean | true |
quality | 上传图像的质量,0 - 1.00之间的浮点数 | Boolean | true |
scaleRatio | 上传图像的缩放比例,接受0 - 1之间的浮点数, 譬如0.5指缩放为原来的一半 | Number | - |
autoRotate | 解析图像中的EXIF信息,并在上传之前正确旋转图像 | Boolean | true |
capture | 设置可选的捕获属性 | String | - |
resultType | 返回上传图片或者预览图片所需要的格式 | String ['base64', 'blob'] | base64 |
action | 默认上传行为的上传地址 | String | - |
custom-handle-upload | 覆盖默认的上传行为,可以自定义上传的实现 | function(file, extra) | — |
before-upload | 上传图片之前的钩子,参数为上传的图片,只有返回 true, 才会继续上传图片,否则停止 | function(file) | — |
on-preview | 预览上传图片的钩子 | function(file) | — |
on-progress | 图片默认ajax上传时的钩子 | function(event, dataurl) | — |
on-success | 图片上传成功时的钩子 | function(response, dataurl) | — |
on-error | 图片上传失败时的钩子 | function(response, dataurl) | — |
FAQs
vue picture component. Resize and preview your uploaded image
The npm package i-image-upload receives a total of 0 weekly downloads. As such, i-image-upload popularity was classified as not popular.
We found that i-image-upload demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
Security News
Socket CEO Feross Aboukhadijeh joins a16z partners to discuss how modern, sophisticated supply chain attacks require AI-driven defenses and explore the challenges and solutions in leveraging AI for threat detection early in the development life cycle.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.