本文实例为大家分享了vue实现移动端图片上传的具体代码,供大家参考,具体内容如下
& lt; template>
& lt; div类="盒子"比;
& lt; div类=皍pDiv”比;
{{labTex}}//标题//上传按钮
& lt;输入ref=" uploadInput "
type="文件"
类=' upinp '
name="文件"
值=" "
接受="图像/gif图像/jpeg图像/jpg图像/png”
@change=" selectImg(事件)”/比;
& lt;/div>//显示上传图片的区域
& lt; div: class=" operationShow& # 63;“operation-div”: operation-div隐藏”比;
& lt; img类=皊hoImg”: src=" https://www.yisu.com/zixun/imgDefault "比;
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
道具:{
价值:{
类型:字符串,
默认值:“
}，
labTex: {
类型:字符串,
默认值:“
}，
imgDefault: {
类型:字符串,
默认值:“
}
}，
数据(){
返回{
dataUrl:”,
defaultImg:“
}
}，
安装(){
console.log (this.value)
console.log (this.labTex)
}，//输入的改变回调第一个参数是事件对象
方法:{
selectImg (e) {
const imgFile=e.target.files [0];
如果(imgFile)
{
this.operationShow=true
如果(this.checkFile (imgFile)) {
this.upload (imgFile);
}
}
}，
checkFile(文件){//文件为空判断
如果(文件===null | |文件===定义){
alert("请选择您要上传的文件!”);
返回错误;
其他}{
返回true;
}
让=Math.floor(文件大小。尺寸/1024);//这个条件还得改
如果(大小!=0){
返回true;
其他}{
返回假
}
}，
上传(文件){
尝试{
让自我=;
var="结果;//执行上传操作
var xhr=new XMLHttpRequest ();
xhr。打开(“文章”,ApiUrl +“/会员/图像/上传”,真的);
xhr。onreadystatechange=function () {
如果(xhr。readyState==4) {
如果(xhr。状态==200){
让returnData=https://www.yisu.com/zixun/$ .parseJSON (xhr.responseText);
如果(! returnData)抛出新的错误(“上传失败服务器”);
如果(! returnData.code)抛出新的错误(“上传失败服务器”)
如果(returnData。代码==200){
alert("上传成功”)//显示图片地址
自我。美元发出(change-img, returnData.name);
self.defaultImg=returnData.url;
其他}{
alert("上传失败服务器”)
}
console.log (" + returnDate)
其他}{
alert("上传失败”)
}
}；
}；
var牌=getMemberToken ();//表单数据
var fd=new FormData ();
fd。追加(“令牌”,令牌);
fd。追加(“文件”,文件);//执行发送
结果=xhr.send (fd);
}捕捉(e) {
console.log (e);
警报(e);
}
}
}
}
& lt;/script>
& lt; style>
.box {
高度:11眼动;
margin-top: 0.5快速眼动;
}
.upDiv {
位置:相对;
高度:1.2快速眼动;
宽度:100%;
margin-bottom: 0.08快速眼动;
宽度:5.5快速眼动;
text-align:中心;
z - index: 10;
字体大小:0.6快速眼动;
填充:0 0.2快速眼动;
border - radius: 0.2快速眼动;
border - radius: 0.4快速眼动;
颜色:# fff;
边界:没有;
高度:1.2快速眼动;
行高:1.2快速眼动;
显示:inline-block;
背景:# 0097 ffd9;
}
.operation-div {
宽度:15眼动;
高度:9.2快速眼动;
}
.operation-div img {
宽度:100%;
高度:100%;
}
.upDiv .upinp {
位置:绝对的;
左:0 px;
右:0 px;
右:0 px;
底部:0 px;
z - index: 1;
透明度:0;
}
.shoImg {
宽度:15眼动;
border - radius: 0.05快速眼动
}
& lt;/style>
在页面当中的使用:
& lt; upload-img
:lab-tex=吧洗锌ㄕ妗薄?
:img-default=" imgFourDefault”
v: change-img=" chooseFourImg "
祝辞& lt;/upload-img>
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
