注册网站送金币,ps软件免费下载破解中文版,青海做网站好的公司,百度排名软件摘要
当使用 Vue.js 的 CDN 来实现一个简单的上传图片组件时#xff0c;你可以利用 Vue 的数据绑定和事件处理能力#xff0c;结合 HTML 和 CSS#xff0c;轻松地创建一个交互式的图片上传界面。以下是一个示例#xff1a;
代码结构 index.html
!DOCTYPE html
你可以利用 Vue 的数据绑定和事件处理能力结合 HTML 和 CSS轻松地创建一个交互式的图片上传界面。以下是一个示例
代码结构 index.html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue上传图片/titlescript srcvue.min.js/scriptscript srcaxios.min.js/scriptstylebody {font-family: Arial, sans-serif;margin: 0;padding: 0;background: #f1f1f1;}.container {width: 100%;margin: 50px auto 0;}.container .upload-pannel {width: 500px;background: #fff;border-radius: 10px;margin: 20px auto 0;overflow: hidden;}.container .upload-pannel .pannel-title {width: 90%;margin: 20px auto;font-size: 15px;color: #333;font-weight: bold;display: block;}.container .upload-pannel .file-select{width: 90%;height: 250px;border: 2px dashed rgb(59,94,225);background: rgba(59,94,225,0.05);margin: 20px auto;display: block;border-radius: 10px;position: relative;}.container .upload-pannel input[typefile]{width: 100%;height: 100%;opacity: 0;position: absolute;left: 0;top: 0;}.container .upload-pannel .upload-icon{width: 40px;height: 35px;display: block;margin: 0 auto;line-height: 250px;}.container .upload-pannel .upload-icon img{width: 40px;height: 35px;}.container .upload-pannel .file-select .upload-text{text-align: center;display: block;font-size: 14px;color: #999;line-height: 230px;}.container .upload-pannel .upload-progress{width: 90%;height: 60px;background: #f1f1f1;margin: 20px auto;border-radius: 10px;overflow: hidden;}.container .upload-pannel .upload-progress .progress-bar-container {position: relative;width: 90%;height: 10px;margin: 25px auto;background: #f1f1f1;border-radius: 10px;overflow: hidden;}.container .upload-pannel .upload-progress .progress-bar {height: 100%;background: rgb(59,94,225);border-radius: 10px;transition: width 0.3s ease-in-out;}.container .upload-pannel .upload-progress .progress-text {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 12px;color: #fff;}.container .upload-pannel .imgPreview{width: 90%;margin: 20px auto;display: block;}/style/headbodydiv idapp/divscriptnew Vue({el: #app,data() {return {imgUrl: ,uploadProgress: 0,uploadProgressbg: false};},methods: {async handleImageUpload(event) {const file event.target.files[0];if (file) {// 上传图片this.uploadProgressbg true;const formData new FormData();formData.append(image, file);try {const response await axios.post(upload.php, formData, {onUploadProgress: progressEvent {// 改变进度条this.uploadProgress Math.round((progressEvent.loaded / progressEvent.total) * 100);},});const imageUrl response.data.url;if (imageUrl) {// 上传成功this.imgUrl imageUrl;}} catch (error) {// 上传失败console.error(Error uploading image:, error);} finally {// 隐藏进度条setTimeout(() {this.uploadProgress 0;this.uploadProgressbg false;}, 1500);}}},},template: div classcontainerdiv classupload-pannelspan classpannel-titleVue.js 图片上传/spanspan classfile-selectinput typefile changehandleImageUploadspan classupload-iconimg srcupload.png //spanspan classupload-text仅支持上传jpg、png、gif格式的图片/span/spandiv classupload-progress v-ifuploadProgressbg truediv classprogress-bar-container :class{ active: uploadProgressbg }div classprogress-bar :style{ width: uploadProgress % }/divspan classprogress-text v-ifuploadProgressbg{{ uploadProgress }}%/span/div/divimg v-ifimgUrl :srcimgUrl classimgPreview/div/div,});/script/body
/html动图演示 作者
TANKING
源码下载
https://afdian.net/item/ffa3292a337c11ee9a8c5254001e7c00
