uni-app 图片上传（uploadFile，chooseImage）
<h1>uni-app 图片上传（uploadFile）</h1><div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)"> 1</span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">template</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)"> 2</span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)"> 3</span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">progress </span><span style="color: rgba(255, 0, 0, 1)">:percent</span><span style="color: rgba(0, 0, 255, 1)">="percent"</span><span style="color: rgba(255, 0, 0, 1)"> strock-width</span><span style="color: rgba(0, 0, 255, 1)">="10"</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">progress</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)"> 4</span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">button </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="primary"</span><span style="color: rgba(255, 0, 0, 1)"> @tap</span><span style="color: rgba(0, 0, 255, 1)">="cI"</span><span style="color: rgba(0, 0, 255, 1)">></span>chooseImg<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">button</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)"> 5</span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)"> 6</span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">template</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)"> 7</span>
<span style="color: rgba(0, 128, 128, 1)"> 8</span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)"> 9</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> 注册一个进度条</span>
<span style="color: rgba(0, 128, 128, 1)">10</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">var</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> _self;
</span><span style="color: rgba(0, 128, 128, 1)">11</span>
<span style="color: rgba(0, 128, 128, 1)">12</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> export </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">default</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 128, 128, 1)">13</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> data() {
</span><span style="color: rgba(0, 128, 128, 1)">14</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">return</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 128, 128, 1)">15</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> percent:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">0</span>
<span style="color: rgba(0, 128, 128, 1)">16</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> }
</span><span style="color: rgba(0, 128, 128, 1)">17</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> },
</span><span style="color: rgba(0, 128, 128, 1)">18</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> onLoad() {
</span><span style="color: rgba(0, 128, 128, 1)">19</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> _self </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">this</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 128, 128, 1)">20</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> },
</span><span style="color: rgba(0, 128, 128, 1)">21</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> methods: {
</span><span style="color: rgba(0, 128, 128, 1)">22</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> cI(){</span>
<span style="color: rgba(0, 128, 128, 1)">23</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> uni.chooseImage({</span>
<span style="color: rgba(0, 128, 128, 1)">24</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> count: 1,</span>
<span style="color: rgba(0, 128, 128, 1)">25</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> sizetype: ['compressed'],</span>
<span style="color: rgba(0, 128, 128, 1)">26</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> success(res){</span>
<span style="color: rgba(0, 128, 128, 1)">27</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> // tepFliePaths 保存图片路径 </span>
<span style="color: rgba(0, 128, 128, 1)">28</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> var imgFiles = res.tempFilePaths;</span>
<span style="color: rgba(0, 128, 128, 1)">29</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> // 因为没写下标， 直接以数组形式输出</span>
<span style="color: rgba(0, 128, 128, 1)">30</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> console.log(imgFiles)</span>
<span style="color: rgba(0, 128, 128, 1)">31</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> }</span>
<span style="color: rgba(0, 128, 128, 1)">32</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> })</span>
<span style="color: rgba(0, 128, 128, 1)">33</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> }</span>
<span style="color: rgba(0, 128, 128, 1)">34</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> cI:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">function</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">(){
</span><span style="color: rgba(0, 128, 128, 1)">35</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> uni.chooseImage({
</span><span style="color: rgba(0, 128, 128, 1)">36</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> count: </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">1</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 128, 1)">37</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> sizeType:[</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">copressed</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">],
</span><span style="color: rgba(0, 128, 128, 1)">38</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> success(res) {
</span><span style="color: rgba(0, 128, 128, 1)">39</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">因为有一张图片， 输出下标， 直接输出地址</span>
<span style="color: rgba(0, 128, 128, 1)">40</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">var</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> imgFiles </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> res.tempFilePaths[</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">0</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">]
</span><span style="color: rgba(0, 128, 128, 1)">41</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> console.log(imgFiles)
</span><span style="color: rgba(0, 128, 128, 1)">42</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> 上传图片</span>
<span style="color: rgba(0, 128, 128, 1)">43</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> 做成一个上传对象</span>
<span style="color: rgba(0, 128, 128, 1)">44</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">var</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> uper </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> uni.uploadFile({
</span><span style="color: rgba(0, 128, 128, 1)">45</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> 需要上传的地址</span>
<span style="color: rgba(0, 128, 128, 1)">46</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> url:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">http://demo.hcoder.net/index.php?c=uperTest</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 128, 1)">47</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> filePath需要上传的文件</span>
<span style="color: rgba(0, 128, 128, 1)">48</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> filePath: imgFiles,
</span><span style="color: rgba(0, 128, 128, 1)">49</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> name: </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">file</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 128, 1)">50</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> success(res1) {
</span><span style="color: rgba(0, 128, 128, 1)">51</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> 显示上传信息</span>
<span style="color: rgba(0, 128, 128, 1)">52</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> console.log(res1)
</span><span style="color: rgba(0, 128, 128, 1)">53</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> }
</span><span style="color: rgba(0, 128, 128, 1)">54</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> });
</span><span style="color: rgba(0, 128, 128, 1)">55</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> onProgressUpdate 上传对象更新的方法</span>
<span style="color: rgba(0, 128, 128, 1)">56</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> uper.onProgressUpdate(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">function</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">(res){
</span><span style="color: rgba(0, 128, 128, 1)">57</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> 进度条等于 上传到的进度</span>
<span style="color: rgba(0, 128, 128, 1)">58</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> _self.percent </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> res.progress
</span><span style="color: rgba(0, 128, 128, 1)">59</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> console.log(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">上传进度</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">+</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> res.progress)
</span><span style="color: rgba(0, 128, 128, 1)">60</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> console.log(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">已经上传的数据长度</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">+</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> res.totalBytesSent)
</span><span style="color: rgba(0, 128, 128, 1)">61</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> console.log(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">预期需要上传的数据总长度</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">+</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> res.totalBytesExpectedToSend)
</span><span style="color: rgba(0, 128, 128, 1)">62</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> })
</span><span style="color: rgba(0, 128, 128, 1)">63</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> }
</span><span style="color: rgba(0, 128, 128, 1)">64</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> })
</span><span style="color: rgba(0, 128, 128, 1)">65</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> }
</span><span style="color: rgba(0, 128, 128, 1)">66</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> }
</span><span style="color: rgba(0, 128, 128, 1)">67</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> }
</span><span style="color: rgba(0, 128, 128, 1)">68</span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)">69</span>
<span style="color: rgba(0, 128, 128, 1)">70</span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">style</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)">71</span>
<span style="color: rgba(0, 128, 128, 1)">72</span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">style</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<h1> 效果图</h1>
<p> <img src="https://img2018.cnblogs.com/blog/1709882/201908/1709882-20190830133630198-1054495375.gif"></p><br><br>
来源：https://www.cnblogs.com/wo1ow1ow1/p/11130772.html
頁:
[1]