前端最终规范


图片上传

<pre><code class="language-javascript">&lt;template&gt; &lt;el-upload class="avatar-uploader" action="/adm/reviewClient/upload" :data="uploadData" :show-file-list="false" :accept="['.jpg','.png','.jpeg']" :auto-upload="true" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" &gt; &lt;div slot="trigger" style="width: 100%; height: 100%"&gt; &lt;slot name="triggerBtn"&gt;&lt;/slot&gt; &lt;/div&gt; &lt;/el-upload&gt; &lt;/template&gt; &lt;script&gt; export default { name: 'UploadImage', props: { fileType: { type: Array, default() { return ['image/jpg', 'image/png', 'image/jpeg'] //png jpg jepg }, }, errorTypeTip: { type: String, default: '上传图片只能是 JPG 、 PNG 或 JPEG 格式!', }, }, data() { return { uploadData: { }, } }, computed: {}, mounted() { }, methods: { beforeAvatarUpload(file) { const type = this.fileType.includes(file.type) if (!type) { this.$message.warning(this.errorTypeTip) return false } return true }, handleAvatarSuccess(response, file, fileList) { if (response.code === '0') { this.$emit('getImg', { ...response.data }) } }, }, } &lt;/script&gt; &lt;style&gt; .avatar-uploader &gt;&gt;&gt; .el-upload { position: relative; background-color: #ccc; } .avatar-uploader &gt;&gt;&gt; .el-upload .avatar-uploader-icon { position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); } .avatar-uploader &gt;&gt;&gt; .el-upload { display: flex; flex-direction: row; justify-content: center; align-items: center; } &lt;/style&gt; </code></pre>

页面列表

ITEM_HTML